Lucide 中文网

Appearance

全局样式 ​

🌐 Global Styling

可以通过使用 颜色、大小 和 描边宽度 来调整图标。你可以使用 CSS 全局设置所有图标的样式。

🌐 Adjusting icons can be done by using color, size and stroke width. To style all icons globally you can use CSS.

使用 CSS 样式 ​

🌐 Style by using CSS

使用 CSS 可以轻松设置图标样式。

🌐 Styling icons is easy to accomplish using CSS.

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

🌐 Every icon has a class attribute applied called lucide. This class name can be used in the CSS file to target all icons that are being used within the app.

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

非缩放笔画 ​

🌐 Non-scaling strokes

对于全局非缩放的笔触宽度样式，可以将 vector-effect: non-scaling-stroke CSS 属性应用到子元素上。这将保持笔触宽度不随图标大小变化。更多信息请参见 non-scaling strokes。

🌐 For global non-scaling stroke width styling the vector-effect: non-scaling-stroke CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See non-scaling strokes for more info.

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

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