全局样式

可以通过 颜色、大小 和 笔触宽度 来调整图标。

默认情况下，所有图标的 颜色 值均为 currentColor，大小 值均为 24px，笔触宽度 为 2。可以通过向图标组件传递 props 来单独设置图标的样式。

使用 CSS 进行样式设置

使用 CSS 来设置图标样式非常简单。

每个图标都会应用一个名为 lucide 的类属性。该类名可以在 CSS 文件中使用，以针对应用中使用的所有图标。

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

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

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

Open Sandbox

绝对笔触宽度

对于全局绝对笔触宽度样式，可以向子元素应用 vector-effect: non-scaling-stroke CSS 属性。这将使笔触宽度无论图标大小如何都保持相同大小。有关更多信息，请参阅 absolute-stroke-width。

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

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

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

Open Sandbox