Lucide Angular

Angular 组件和服务，用于 Lucide 图标，集成了 Angular 的依赖注入和组件体系。提供传统基于模块以及现代独立组件两种方式，最大限度地灵活性，适用于各种 Angular 应用。

你可以实现的功能：

• 将图标用作 Angular 组件，并完全支持依赖注入
• 通过 Angular 服务和提供者实现图标全局配置
• 在（lucide-angular、lucide-icon、i-lucide、span-lucide）等多种组件选择器之间进行选择
• 与 Angular 的响应式表单和数据绑定无缝集成
• 通过树摇稀疏图标包和懒加载支持构建可扩展应用

安装

pnpm

pnpm install lucide-angular

yarn

yarn add lucide-angular

npm

npm install lucide-angular

bun

bun add lucide-angular

如何使用

步骤 1：导入 LucideAngularModule

在任何你想使用 Lucide 图标的 Angular 模块中，你都需要导入 LucideAngularModule，并挑选你想使用的图标：

import { LucideAngularModule, File, House, Menu, UserCheck } from 'lucide-angular';

@NgModule({
  imports: [
    LucideAngularModule.pick({File, House, Menu, UserCheck})
  ]
})
export class AppModule { }

或使用独立版：

import { Component } from '@angular/core';
import { LucideAngularModule, FileIcon } from 'lucide-angular';

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [LucideAngularModule]
})
export class AppComponent {
  readonly FileIcon = FileIcon;
}

步骤 2：在模板中使用图标

在你的模板中，你现在可以使用以下任意组件标签来插入图标：

<lucide-angular name="file" class="my-icon"></lucide-angular>
<lucide-icon name="house" class="my-icon"></lucide-icon>
<i-lucide name="menu" class="my-icon"></i-lucide>
<span-lucide name="user-check" class="my-icon"></span-lucide>

独立使用时：

<lucide-angular [img]="FileIcon" class="my-icon"></lucide-angular>
<lucide-icon [img]="FileIcon" class="my-icon"></lucide-icon>
<i-lucide [img]="FileIcon" class="my-icon"></i-lucide>
<span-lucide [img]="FileIcon" class="my-icon"></span-lucide>

属性

你可以传递附加属性来调整图标外观。

名称	类型	默认值
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

<i-lucide name="house" [size]="48" color="red" [strokeWidth]="1"></i-lucide>

全局配置

你可以在根组件中注入 LucideIconConfig 服务，来全局配置上述默认属性值。

使用自定义 CSS 类进行样式

任何额外的 HTML 属性都会被忽略，但 class 属性会被传递到内部的 SVG 元素上，用来进行样式设定：

svg.my-icon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

注入多个图标提供者

你可以通过 LUCIDE_ICONS 注入令牌提供额外的图标，该令牌接受实现 LucideIconsProviderInterface 接口的多个提供者，使用辅助类 LucideIconsProvider 可以更方便地使用：

import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
import { MyIcon } from './icons/my-icon';

const myIcons = {MyIcon};

@NgModule({
  providers: [
    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
  ]
})
export class AppModule { }

要添加自定义图标，首先需要将其转换为 svgson 格式。

加载所有图标

DANGER

你也可以选择导入所有图标，但请注意，这会显著增加你应用的构建体积。

import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)

使用 Lucide Lab 或自定义图标

Lucide lab 是一套不包含在 Lucide 主库中的图标集合。它们可以与官方图标以相同方式使用。

import { LucideAngularModule } from 'lucide-angular';
import { coconut } from '@lucide/lab';

@NgModule({
  imports: [
    LucideAngularModule.pick({ coconut })
  ]
})
export class AppModule { }