Appearance
入门
🌐 Getting started
本指南将帮助你在 Astro 项目中开始使用 Lucide。确保你已经设置了 Astro 环境。如果你还没有，可以使用 Vite 或你选择的任何其他 Astro 模板创建一个新的 Astro 项目。
🌐 This guide will help you get started with Lucide in your Astro project. Make sure you have a Astro environment set up. If you don't have one yet, you can create a new Astro project using Vite, or any other Astro boilerplate of your choice.
安装
🌐 Installation
sh
pnpm add @lucide/astrosh
yarn add @lucide/astrosh
npm install @lucide/astrosh
bun add @lucide/astro导入你的第一个图标
🌐 Importing your first icon
Lucide 基于 ES 模块构建，因此完全支持 tree-shaking。
🌐 Lucide is built with ES Modules, so it's completely tree-shakable.
每个图标都可以作为 Astro 组件导入，它会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标会包含在最终的包中，其余的图标会被 tree-shaked 移除。
🌐 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.
astro
---
import { Camera } from '@lucide/astro';
---
<Camera />属性
🌐 Props
要自定义图标的外观，你可以使用以下属性：
🌐 To customize the appearance of an icon, you can use the following props:
| 名称 | 类型 | 默认值 |
|---|---|---|
size | 数字 | 24 |
color | 字符串 | currentColor |
stroke-width | 数字 | 2 |
absoluteStrokeWidth | 布尔值 | false |
default-class | 字符串 | lucide-icon |
因为图标呈现为 SVG 元素，所有标准的 SVG 属性也可以作为属性应用。请参见 MDN 上的 SVG 表现属性列表。
🌐 Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on MDN.
astro
---
import { Camera } from '@lucide/astro';
---
<Camera color="#ff3e98" size={48} stroke-width={1} />更多示例和如何使用 props 的详细信息，继续指南：
🌐 More examples and details how to use props, continue the guide: