Weadb Notes

Lucide icons 与 Astro 集成

刚刚·8 min read

介绍

Lucide 是一个开源的图标库，提供了丰富的 SVG 图标资源。通过 @lucide/astro 包，你可以轻松地在 Astro 项目中使用 Lucide 图标。

安装

npm install @lucide/astro

bun add @lucide/astro

使用

在 Astro 项目中，你可以通过以下方式使用 Lucide 图标：

---
import { IconName } from '@lucide/astro';
---
<IconName />

属性

Lucide 图标支持以下属性：

  • size: 图标的大小，默认值为 24，可以设置为任意数字或字符串（如 32, 2em 等）。
  • color: 图标的颜色，默认值为 currentColor，可以设置为任意有效的 CSS 颜色值。
  • strokeWidth: 图标的线条宽度，默认值为 2，可以设置为任意数字。
  • absoluteStrokeWidth: 是否使用绝对线条宽度， 默认值为 false，如果设置为 true，则线条宽度不会随图标大小缩放。
  • class: 自定义 CSS 类名，可以用于添加自定义样式。

示例

---
import { Home, User } from '@lucide/astro';
---
<Home size={32} color="blue" strokeWidth={1.5} />
<User size="2em" color="#ff0000" strokeWidth={3} absoluteStrokeWidth={true} class="custom-icon" />