使用 Lucide Lab 或自定义图标

🌐 With Lucide Lab or custom icons

Lucide Lab 是一组不属于 Lucide 主库的图标。

虽然它们不是作为独立组件提供的，但仍然可以像官方图标一样传递给 LucideIcon 组件：

🌐 While they aren't provided as standalone components, they can be still be passed to the LucideIcon component the same way as official icons:

直接作为 LucideIconData

🌐 Directly as LucideIconData

import { Component, ViewEncapsulation, signal } from "@angular/core";
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
import { coconut } from '@lucide/lab';

@Component({
  selector: 'app',
  template: `
    <svg [lucideIcon]="icon()"></svg>
  `,
  imports: [LucideDynamicIcon],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
  readonly icon = signal(lucideLegacyIcon('coconut', coconut));
}

Open Sandbox

作为按名称提供的图标

🌐 As a provided icon by name

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideDynamicIcon } from '@lucide/angular';

@Component({
  selector: 'app',
  template: `
    <svg lucideIcon="bat-ball"></svg>
  `,
  imports: [LucideDynamicIcon],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox

创建自定义图标组件

🌐 Creating custom icon components

你也可以使用 LucideIconBase 创建你自己的独立图标组件。

🌐 You can also create your own standalone icon components using LucideIconBase.

确保使用 SVG 元素选择器，例如 svg[lucide{IconName}]

🌐 Be sure to use an SVG element selector, e.g. svg[lucide{IconName}]

import { Component, ViewEncapsulation, signal } from "@angular/core";
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
import { LucideBottleChampagne } from "../icons/bottle-champagne";

@Component({
  selector: 'app',
  template: `<svg lucideBottleChampagne></svg>`,
  imports: [LucideBottleChampagne],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox