Lucide Angular

用于 Lucide 图标的 Angular 组件和服务，可与 Angular 的依赖注入和组件系统集成。提供传统的基于模块的方法和现代的独立组件方法，以实现 Angular 应用的最大灵活性。

¥Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications.

你可以实现的目标：

¥What you can accomplish:

• 将图标用作 Angular 组件，并完全支持依赖注入

  ¥Use icons as Angular components with full dependency injection support

• 通过 Angular 服务和提供程序全局配置图标

  ¥Configure icons globally through Angular services and providers

• 从多个组件选择器中选择（lucide-angular、lucide-icon、i-lucide、span-lucide）

  ¥Choose from multiple component selectors (lucide-angular, lucide-icon, i-lucide, span-lucide)

• 与 Angular 的响应式表单和数据绑定集成

  ¥Integrate with Angular's reactive forms and data binding

• 使用 tree-shaking 图标包和延迟加载支持构建可扩展应用

  ¥Build scalable applications with tree-shaken icon bundles and lazy loading support

安装

¥Installation

pnpm

pnpm install lucide-angular

yarn

yarn add lucide-angular

npm

npm install lucide-angular

bun

bun add lucide-angular

如何使用

¥How to use

步骤 1:导入 LucideAngularModule

¥Step 1: Import LucideAngularModule

在任何希望使用 Lucide 图标的 Angular 模块中，你必须导入 LucideAngularModule，然后选择你想要使用的图标：

¥In any Angular module you wish to use Lucide icons in, you have to import LucideAngularModule, and pick any icons you wish to use:

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

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

或使用独立版本：

¥or using standalone version:

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:在模板中使用图标

¥Step 2: Use the icons in templates

现在，你可以在模板中使用以下组件标签之一插入图标：

¥Within your templates you may now use one of the following component tags to insert an icon:

<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>

用于独立版本

¥for standalone

<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>

属性

¥Props

你可以传递其他属性来调整图标外观。

¥You can pass additional props to adjust the icon appearance.

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	布尔值	false

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

全局配置

¥Global configuration

你可以在根组件中注入 LucideIconConfig 服务，以便全局配置上面定义的默认属性值。

¥You can inject the LucideIconConfig service in your root component to globally configure the default property values as defined above.

使用自定义 CSS 类样式

¥Styling using a custom CSS class

任何额外的 HTML 属性都会被忽略，但 class 属性会传递到内部 SVG 图片元素，并可用于设置其样式：

¥Any extra HTML attribute is ignored, but the class attribute is passed onto the internal SVG image element and it can be used to style it:

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

注入多个图标提供程序

¥Injecting multiple icon providers

你可以使用 LUCIDE_ICONS 注入令牌提供其他图标，该令牌接受多个接口 LucideIconsProviderInterface 的提供程序，并提供实用程序类 LucideIconsProvider 以便于使用：

¥You may provide additional icons using the LUCIDE_ICONS injection token, which accepts multiple providers of the interface LucideIconsProviderInterface with the utility class LucideIconsProvider available for easier usage:

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 格式 格式。

¥To add custom icons, you will first need to convert them to an svgson format.

加载所有图标

¥Loading all icons

危险

你也可以根据需要选择使用以下格式导入所有图标，但请注意，这将显著增加应用的构建大小。

¥You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.

import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)

使用 Lucide Lab 或自定义图标

¥With Lucide lab or custom icons

Lucide Lab 是一个图标集合，不属于 Lucide 主库。它们的使用方式与官方图标相同。

¥Lucide lab is a collection of icons that are not part of the Lucide main library. They can be used in the same way as the official icons.

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

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