Lucide 中文文档

外观

全局样式 ​

调整图标可以通过使用 颜色、大小 和 描边宽度 来完成。 要全局样式化所有图标，你可以使用 CSS。

使用 CSS 进行样式化 ​

使用 CSS 可以轻松实现图标样式化。

每个图标都应用了一个名为 lucide 的 class 属性。这个类名可以在 CSS 文件中用于定位应用中所有正在使用的图标。

  • 图标的 颜色 可以使用 color CSS 属性来更改。
  • 图标的 大小 可以使用 width 和 height CSS 属性来更改。
  • 图标的 描边宽度 可以使用 stroke-width CSS 属性来更改。
css
.lucide {
  color: #ffadff;
  width: 56px;
  height: 56px;
  stroke-width: 1px;
}

非缩放描边 ​

要全局设置非缩放描边宽度，可以将 vector-effect: non-scaling-stroke CSS 属性应用于子元素。无论图标大小如何，这都将使描边宽度保持相同大小。有关更多信息，请参阅非缩放描边。

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

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