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;
}

绝对笔触宽度 ​

🌐 Absolute stroke width

对于全局绝对描边宽度样式，可以将 vector-effect: non-scaling-stroke CSS 属性应用于子元素。这将保持描边宽度在图标大小变化时保持不变。更多信息请参见 absolute-stroke-width。

🌐 For global absolute 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 absolute-stroke-width for more info.

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

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