Lucide Angular

Angular 应用的 Lucide 图标库实现。

安装

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>

属性

您可以传递额外的属性来调整图标外观。

name	type	default
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 { }