Lucide 中文网

Appearance

全局样式 ​

🌐 Global Styling

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

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

我们建议使用 CSS 进行全局样式设置，因为这是实现这一目标最直接的方法。但使用 CSS 会阻止你在单个图标上使用像 size、color 和 strokeWidth 这样的属性，因为 CSS 的特异性会覆盖这些属性。要在单个图标上使用这些属性，你需要使用 Lucide 上下文提供器。

🌐 We recommend using CSS for global styling, as it is the most straightforward way to achieve this. But using CSS prevents you from using props like size, color and strokeWidth on individual icons, since CSS specificity will override these props, to be able to use the props on individual ones you need to use the Lucide context provider.

上下文提供者 ​

🌐 Context Provider

要使用上下文提供者进行全局样式，可以使用 lucide-react 包提供的 LucideProvider 组件。

🌐 For global styling using a context provider, you can use the LucideProvider component that is provided by the lucide-react package.

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

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

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

🌐 This will apply the color, size and strokeWidth props to all icons that are children of the LucideProvider.

使用 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 属性更改图标的 描边宽度。
.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 on CodeSandboxOpen 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 on CodeSandboxOpen Sandbox