Lucide 中文网

Appearance

全局样式 ​

🌐 Global styling

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

🌐 Adjusting icons can be done by using color, size and stroke width. To style all icons globally, you can either use CSS, or use the attrs option in createIcons.

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

🌐 We recommend using CSS for global styling, as it is the most straightforward way to achieve this.

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

🌐 This will apply the color, size and strokeWidth props to all icons.

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

🌐 Style by using attrs on createIcons

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

🌐 You can also apply global styles by passing attributes to the createIcons function.

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

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

使用 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: 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