docs/guide/astro/getting-started.md
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.
::: code-group
pnpm add @lucide/astro
yarn add @lucide/astro
npm install @lucide/astro
bun add @lucide/astro
:::
Lucide is built with ES Modules, so it's completely tree-shakable.
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.
---
import { Camera } from '@lucide/astro';
---
<Camera />
To customize the appearance of an icon, you can use the following props:
| name | type | default |
|---|---|---|
size | number | 24 |
color | string | currentColor |
stroke-width | number | 2 |
absoluteStrokeWidth | boolean | false |
default-class | string | lucide-icon |
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.
---
import { Camera } from '@lucide/astro';
---
<Camera color="#ff3e98" size={48} stroke-width={1} />
More examples and details how to use props, continue the guide:
<OverviewLinkGrid> <OverviewLink v-for="item in astroSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/> </OverviewLinkGrid>