全局样式

¥Global Styling

可以通过以下方式调整图标 color、size 和 描边宽度。

¥Adjusting icons can be done by color, size and stroke width.

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

¥By default, all icons have a color value of currentColor, a size value of 24px, and a stroke width of 2. Styling icons individually can be done by passing props to the icon component.

使用 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 属性更改图标的颜色。

  ¥The color of the icons can be changed using the color CSS property.

• 可以使用 width 和 height CSS 属性更改图标大小。

  ¥The size of the icons can be changed using width and height CSS properties.

• 可以使用 stroke-width CSS 属性更改图标的描边宽度。

  ¥The stroke width of the icons can be changed using the stroke-width CSS property.

.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

绝对笔触宽度

¥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.

.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