全局样式

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

要全局样式化所有图标，您可以使用 CSS 或使用 provideLucideConfig 配置全局默认值。

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

配置全局默认值

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

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

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

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

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

使用 CSS 进行样式化

可以使用 CSS 完成图标的全局样式化。

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

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

.lucide {
  /* 修改这里！ */
  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

绝对描边宽度

为了保持描边宽度恒定而不受图标大小影响，请将 vector-effect: non-scaling-stroke 应用于图标的子元素。请参阅 absolute-stroke-width 了解更多详情。

.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