Lucide 中文文档

外观

全局样式 ​

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

我们推荐使用 CSS 进行全局样式化，因为这是实现此目的最直接的方式。 但使用 CSS 会阻止你在单个图标上使用像 size、color 和 strokeWidth 这样的属性，因为 CSS 特异性会覆盖这些属性，为了能够在单个图标上使用这些属性，你需要使用 Lucide 上下文提供者。

上下文提供者 ​

对于使用上下文提供者进行全局样式化，你可以使用由 lucide-solid 包提供的 LucideProvider 组件。

tsx
import { LucideProvider, Home } from 'lucide-solid';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

这会将 color、size 和 strokeWidth 属性应用于 LucideProvider 的所有子图标。

使用 CSS 设置样式 ​

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

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

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

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

非缩放描边 ​

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

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

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

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