入门

🌐 Getting started

本指南将帮助你在 Angular 项目中开始使用 Lucide。确保你已经设置了 Angular 环境。如果你还没有环境，可以使用 @angular/cli 创建一个新的 Angular 项目。

🌐 This guide will help you get started with Lucide in your Angular project. Make sure you have an Angular environment set up. If you don't have one yet, you can create a new Angular project using @angular/cli.

先决条件

🌐 Prerequisites

此包需要 Angular 17 及以上版本，并使用独立组件、信号和无区域变更检测。

🌐 This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.

安装

🌐 Installation

pnpm

pnpm add @lucide/angular

yarn

yarn add @lucide/angular

npm

npm install @lucide/angular

bun

bun add @lucide/angular

导入你的第一个图标

🌐 Importing your first icon

这个库是由独立组件构建的，因此它可以完全进行树摇优化。

🌐 This library is built with standalone components, so it's completely tree-shakable.

每个图标都可以作为可直接使用的独立组件导入，它会渲染一个内联 SVG 元素。这样，只有导入到你的项目中的图标会被包含在最终的打包文件中，其余的图标会被树摇移除。

🌐 Every icon can be imported as a ready-to-use standalone component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

独立图标

🌐 Standalone icons

import { Component } from '@angular/core';
import { LucideFileText } from '@lucide/angular';

@Component({
  selector: 'app',
  template: '<svg lucideFileText></svg>',
  imports: [LucideFileText],
})
export class App { }

动态图标组件

🌐 Dynamic icon component

当你需要动态渲染图标时（例如在菜单项列表中或基于布尔信号时），你可以使用 LucideDynamicIcon 组件：

🌐 When you need to render icons dynamically (for example in a list of menu items or based on a boolean signal), you can use the LucideDynamicIcon component:

import { Component, computed, signal } from '@angular/core';
import { LucideDynamicIcon, LucideCircleCheck, LucideCircleX } from '@lucide/angular';

@Component({
  selector: 'app',
  template: `<svg [lucideIcon]="icon()"></svg>`,
  imports: [LucideDynamicIcon],
})
export class App {
  protected readonly model = signal<boolean>(true);
  protected readonly icon = computed(() => this.model() ? LucideCircleCheck : LucideCircleX);
}

组件输入

🌐 Component inputs

要自定义图标的外观，你可以使用以下输入：

🌐 To customize the appearance of an icon, you can use the following inputs:

名称	类型	默认值
size	数字	24
color	字符串	currentColor
strokeWidth	数字	2
absoluteStrokeWidth	布尔值	false
title	字符串	null

因为图标以 SVG 元素呈现，所以所有标准 SVG 属性也可以应用。请参见 MDN 上的 SVG 表现属性列表。

🌐 Because icons render as SVG elements, all standard SVG attributes can also be applied. See the list of SVG Presentation Attributes on MDN.

<svg lucideHouse [size]="48" color="red" [strokeWidth]="1" title="家居"></svg>

有关如何使用这些输入的更多示例和详细信息，请继续查看指南：

🌐 For more examples and details on how to use these inputs, continue the guide:

颜色Adjust the color of your icons尺寸Adjust the size of your icons描边宽度Adjust the stroke width of your icons