Lucide Astro

用于 Lucide 图标的 Astro 组件，可与 Astro 的孤岛架构和多框架支持完美兼容。每个图标都是一个 Astro 组件，可渲染为内联 SVG，为静态网站和服务器端渲染场景提供卓越的性能。

¥Astro components for Lucide icons that work perfectly with Astro's island architecture and multi-framework support. Each icon is an Astro component that renders as an inline SVG, providing excellent performance for static sites and server-side rendering scenarios.

你可以实现的目标：

¥What you can accomplish:

• 将图标用作 Astro 组件，且 JavaScript 运行时开销为零

  ¥Use icons as Astro components with zero JavaScript runtime overhead

• 使用优化的 SVG 图标构建快速静态网站

  ¥Build fast, static websites with optimized SVG icons

• 与 Astro 的组件岛和部分水合无缝集成

  ¥Integrate seamlessly with Astro's component islands and partial hydration

• 创建图标可跨不同 UI 库工作的多框架应用

  ¥Create multi-framework applications where icons work across different UI libraries

• 通过直接导入图标和构建时渲染优化性能

  ¥Optimize performance with direct icon imports and build-time rendering

安装

¥Installation

pnpm

pnpm add @lucide/astro

yarn

yarn add @lucide/astro

npm

npm install @lucide/astro

bun

bun add @lucide/astro

如何使用

¥How to use

Lucide 基于 ES 模块构建，因此完全支持 tree-shaking。

¥Lucide is built with ES Modules, so it's completely tree-shakable.

每个图标都可以作为 Astro 组件导入，该组件会渲染为内联 SVG 元素。这样，只有导入到项目中的图标才会包含在最终的软件包中。其余图标已通过 tree-shaking 移除。

¥Each icon can be imported as an Astro component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

示例

¥Example

默认用法：

¥Default usage:

---
import { Skull } from '@lucide/astro';
---

<Skull />

可以传递其他属性来调整图标：

¥Additional props can be passed to adjust the icon:

---
import { Camera } from '@lucide/astro';
---

<Camera color="#ff3e98" />

为了加快构建和加载速度，你可以直接从 @lucide/astro/icons 目录导入图标：

¥For faster builds and load times, you can import icons directly from the @lucide/astro/icons directory:

---
import CircleAlert from '@lucide/astro/icons/circle-alert';
---

<CircleAlert color="#ff3e98" />

属性

¥Props

name	type	default
size	number	24
color	string	currentColor
stroke-width	number	2
absoluteStrokeWidth	布尔值	false

应用属性

¥Applying props

要自定义图标的外观，你可以将自定义属性作为 props 直接传递给组件。该组件接受所有 SVG 属性作为属性，从而允许灵活地设置 SVG 元素的样式。请参阅 MDN 上的 SVG 展示属性列表。

¥To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on MDN.

---
import { Phone } from '@lucide/astro';
---

<Phone fill="#333" />

这将生成一个填充的调用图标。

¥This results a filled phone icon.

类型

¥Types

该软件包包含所有图标的类型定义。如果你想动态渲染图标，这都非常有用。

¥The package includes type definitions for all icons. This is useful if you want to dynamically render icons.

示例

¥Example

---
import { House, Library, Cog, type Icon as IconType } from '@lucide/astro';

type MenuItem = {
  name: string;
  href: string;
  icon: typeof IconType;
};

const menuItems: MenuItem[] = [
  {
    name: 'Home',
    href: '/',
    icon: House,
  },
  {
    name: 'Blog',
    href: '/blog',
    icon: Library,
  },
  {
    name: 'Projects',
    href: '/projects',
    icon: Cog,
  },
];
---

{
  menuItems.map((item) => (
    <a href={item.href}>
      <item.icon />
      <span>{item.name}</span>
    </a>
  ))
}

使用 Lucide Lab 或自定义图标

¥With Lucide lab or custom icons

Lucide Lab 是一个图标集合，不属于 Lucide 主库。

¥Lucide lab is a collection of icons that are not part of the Lucide main library.

它们可以通过 Icon 组件使用。所有与常规 Lucide 图标类似的属性都可以通过传递来调整图标外观。

¥They can be used by using the Icon component. All props of the regular Lucide icons can be passed to adjust the icon appearance.

使用 Icon 组件

¥Using the Icon component

这将根据传递的 iconNode 创建一个图标，并渲染一个 Lucide 图标组件。

¥This creates a single icon based on the iconNode passed and renders a Lucide icon component.

---
import { Icon } from '@lucide/astro';
import { burger, sausage } from '@lucide/lab';
---

<Icon iconNode={burger} />
<Icon iconNode={sausage} color="red"/>

一个通用图标组件

¥One generic icon component

可以创建一个通用的图标组件来加载图标，但不建议这样做。

¥It is possible to create one generic icon component to load icons, but it is not recommended.

危险

以下示例导入了所有 ES 模块，因此使用时请谨慎。导入所有图标将显著增加应用的构建大小。如果你在服务器环境中执行 SSG 和 SSR，这可能是可行的。但是，如果你在无服务器环境中执行服务器端渲染 (SSR)，则可能会对应用的性能产生负面影响，因为更大的包大小会导致冷启动次数增加。

¥The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application. This may be passable if you're doing SSG and SSR in server environments. However if you're doing SSR in serverless environments, it could negatively affect your app's performance, as a bigger bundle size will translate to an increase in cold starts.

图标组件示例

¥Icon Component Example

---
import { icons, type IconProps } from '@lucide/astro';

interface Props extends IconProps {
  name: keyof typeof icons;
}

const { name, ...restProps } = Astro.props;
const Icon = icons[name];
---

<Icon {...restProps} />

使用图标组件

¥Using the Icon Component

---
import LucideIcon from './LucideIcon.astro';
---

<LucideIcon name="Menu" />