Lucide 中文文档

Appearance

全局样式 ​

可以通过使用 颜色、大小 和 描边宽度 来调整图标。 要为所有图标应用全局样式，你可以使用 CSS，或者使用 createIcons 中的 attrs 选项。

我们建议使用 CSS 进行全局样式设置，因为这是实现此目的最直接的方式。

这会将 color、size 和 strokeWidth props 应用到所有图标。

通过在 createIcons 上使用 attrs 进行样式设置 ​

你也可以通过向 createIcons 函数传递属性来应用全局样式。

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="building"></i>

    <script src="index.js"></script>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

通过使用 CSS 进行样式设置 ​

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

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

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

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