图标提供者

🌐 Icon provider

你可以使用 LucideDynamicIcon 组件通过名称渲染图标。要通过名称使用图标，你必须先用 provideLucideIcons 注册它。

🌐 You can use the LucideDynamicIcon component to render icons by name. To use an icon by name, you must first register it with provideLucideIcons.

确保你熟悉 Angular 中依赖注入的工作原理。

🌐 Make sure you are well acquainted with how dependency injection in Angular works.

注册图标

🌐 Registering icons

在你的应用提供者中使用 provideLucideIcons 来注册图标。

🌐 Use provideLucideIcons in your application providers to register icons.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideLucideIcons, LucideSquareCheck, LucideCircleAlert } from '@lucide/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideIcons(
      LucideSquareCheck,
      LucideCircleAlert,
    ),
  ],
};

然后你可以通过名称引用已注册的图标：

🌐 You can then reference the registered icons by name:

app.html

<svg lucideIcon="square-check"></svg>
<svg lucideIcon="circle-alert"></svg>

名称是如何解析的

🌐 How names are resolved

每个注册的图标都按其图标名称存储。对于内置的 Lucide 图标，这通常是 kebab-case 风格的图标名称。

🌐 Each registered icon is stored by its icon name. For built-in Lucide icons, this is typically the kebab-case icon name.

例如，注册 LucideSquareCheck 后可以这样使用：

🌐 For example, registering LucideSquareCheck makes it available as:

<svg lucideIcon="square-check"></svg>

如果一个图标定义了别名，这些别名也会被自动注册。

🌐 If an icon defines aliases, those aliases are also registered automatically.

注册自定义图标

🌐 Registering custom icons

provideLucideIcons 也可以注册自定义图标数据对象。

custom-icon.ts

import { LucideIconData } from '@lucide/angular';

export const MyCustomIcon: LucideIconData = {
  name: 'my-custom-icon',
  node: [
    ['circle', { cx: 12, cy: 12, r: 8 }],
  ],
};

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideLucideIcons } from '@lucide/angular';
import { MyCustomIcon } from './custom-icon';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideIcons(MyCustomIcon),
  ],
};

app.html

<svg lucideIcon="my-custom-icon"></svg>

使用传统图标节点

🌐 Using legacy icon nodes

如果你有旧版节点格式的图标，例如匹配 lucide-angular 或 @lucide/lab 的自定义图标，你可以使用 lucideLegacyIcon 进行转换。

🌐 If you have icons in the legacy node format, such as custom icons matching lucide-angular or @lucide/lab, you can convert them using lucideLegacyIcon.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideLucideIcons, lucideLegacyIcon } from '@lucide/angular';
import { CirclePlayIcon } from 'lucide-angular';
import { burger } from '@lucide/lab';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideIcons(
      lucideLegacyIcon('circle-play', CirclePlayIcon, ['play-circle']),
      lucideLegacyIcon('burger', burger, ['hamburger']),
    ),
  ],
};

然后你可以同时使用主要名称和任何别名：

🌐 You can then use both the primary name and any aliases:

app.html

<svg lucideIcon="circle-play"></svg>
<svg lucideIcon="play-circle"></svg>
<svg lucideIcon="burger"></svg>
<svg lucideIcon="hamburger"></svg>

转换旧版图标的地图

🌐 Converting a map of legacy icons

如果你已经有一个旧版图标节点的地图，使用 lucideLegacyIconMap 将它们转换为图标数据对象。

🌐 If you already have a map of legacy icon nodes, use lucideLegacyIconMap to convert them into icon data objects.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideLucideIcons, lucideLegacyIconMap, Circle } from '@lucide/angular';
import { UserRoundX } from 'lucide-angular';
import { burger } from '@lucide/lab';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideIcons(
      Circle,
      ...lucideLegacyIconMap({ UserRoundX, burger }),
    ),
  ],
};

这将对象键转换为 kebab-case 图标名称：

🌐 This converts the object keys to kebab-case icon names:

• UserRoundX → user-round-x
• burger → burger

原始对象键也被添加为别名，所以这两个都可以使用：

🌐 The original object key is also added as an alias, so both of these will work:

<svg lucideIcon="UserRoundX"></svg>
<svg lucideIcon="user-round-x"></svg>