使用 Lucide Lab 或自定义图标

Lucide Lab 是不属于 Lucide 主库的图标集合。

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

直接作为 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

作为按名称提供的图标

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

创建自定义图标组件

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

确保使用 SVG 元素选择器，例如 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