Lucide 中文网

Appearance

Lucide Angular ​

WARNING

本文档适用于我们面向 Angular 的旧版软件包。

对于我们现代的、以独立为先的实现，请参阅 @lucide/angular。

🌐 For our modern, standalone-first implementation, please refer to @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.

你可以完成的事:

  • 将图标用作 Angular 组件，并完全支持依赖注入
  • 通过 Angular 服务和提供程序全局配置图标
  • 从多个组件选择器中选择（lucide-angular、lucide-icon、i-lucide、span-lucide）
  • 与 Angular 的响应式表单和数据绑定集成
  • 使用 tree-shaking 图标包和延迟加载支持构建可扩展应用

安装 ​

🌐 Installation

sh
pnpm add lucide-angular
sh
yarn add lucide-angular
sh
npm install lucide-angular
sh
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:

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

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

或使用独立版本：

🌐 or using standalone version:

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

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

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

名称类型默认值
size数字24
color字符串currentColor
strokeWidth数字2
absoluteStrokeWidth布尔值false
html
<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:

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

js
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

DANGER

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

js
import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)

使用 Lucide Lab 或自定义图标 ​

🌐 With Lucide Lab or custom icons

Lucide Lab 是一组不属于 Lucide 主库的图标。它们可以像官方图标一样使用。

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

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

无障碍 ​

🌐 Accessibility

默认情况下，我们使用 aria-hidden="true" 从屏幕阅读器中隐藏图标。

🌐 By default, we hide icons from screen readers using aria-hidden="true".

你可以使用 aria-label 添加可访问性属性。

🌐 You can add accessibility attributes using aria-labels.

html
<lucide-icon name="check" aria-label="Task completed"></lucide-icon>

有关无障碍最佳实践，请参阅我们的无障碍指南。

🌐 For best practices on accessibility, please see our accessibility guide.