全局样式

🌐 Global Styling

Lucide 图标可以使用 颜色、大小 和 描边宽度 输入进行自定义。

🌐 Lucide icons can be customized using the inputs for color, size and stroke width.

要全局设置所有图标的样式，你可以使用 CSS 或通过 provideLucideConfig 配置全局默认值。

🌐 To style all icons globally, you can either use CSS or configure global defaults using provideLucideConfig.

我们建议使用 CSS 进行全局样式设置，因为这是最直接的方法。但是，CSS 规则可能会覆盖单个图标上的 size、color 和 strokeWidth 输入。如果你需要为每个图标保持这些输入可配置，请改用 provideLucideConfig。

🌐 We recommend using CSS for global styling, as it is the most straightforward approach. However, CSS rules may override the size, color, and strokeWidth inputs on individual icons. If you need to keep those inputs configurable per icon, use provideLucideConfig instead.

配置全局默认值

🌐 Configuring global defaults

Lucide Angular 提供 provideLucideConfig 提供者来设置所有图标的默认属性。

🌐 Lucide Angular provides the provideLucideConfig provider to set default properties for all icons.

你可以定义全局默认值（例如 size、color 或 strokeWidth），同时仍允许单个图标通过输入覆盖它们。

🌐 You can define global defaults (such as size, color, or strokeWidth) while still allowing individual icons to override them through inputs.

在你的应用配置或顶层组件中注册提供程序：

🌐 Register the provider in your application configuration or in a top-level component:

import { ApplicationConfig } from '@angular/core';
import { provideLucideConfig } from '@lucide/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideConfig({
      strokeWidth: 1.5
    }),
  ]
};

使用 CSS 样式

🌐 Style by using CSS

可以使用 CSS 对图标进行全局样式设置。

🌐 Styling icons globally can be done using CSS.

所有 Lucide 图标都包含 lucide 类。你可以在样式中使用此类来针对应用中的每个图标。

🌐 All Lucide icons include the lucide class. You can use this class in your styles to target every icon in your application.

• 图标的颜色可以使用color属性更改。
• 图标的大小可以使用 width 和 height 进行更改。
• 图标的描边宽度可以使用stroke-width进行更改。

.lucide {
  /* Change this! */
  color: #ffadff;
  width: 56px;
  height: 56px;
  stroke-width: 1px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox

绝对笔触宽度

🌐 Absolute stroke width

为了在不管图标大小的情况下保持笔画宽度恒定，将 vector-effect: non-scaling-stroke 应用到图标的子元素。更多细节请参见 absolute-stroke-width。

🌐 To keep the stroke width constant regardless of icon size, apply vector-effect: non-scaling-stroke to the icon's children. See absolute-stroke-width for more details.

.lucide {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.lucide * {
  vector-effect: non-scaling-stroke;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox