602bca62a2
Installing `@lucide/svelte@next` currently gets version 1.3.0, which is out of date compared to installing `@lucide/svelte` (aka `@lucide/svelte@latest`), which gets version 1.17.0. It seems to make more sense to instruct users to get the latest version.
This change matches identical changes to the getting-started guides for other frameworks in 5f83bbf7e7 - it seems like the omission of Svelte was likely an oversight (?)
2.3 KiB
title, description
| title | description |
|---|---|
| Getting started - Svelte | This guide will help you get started with Lucide in your Svelte project. |
Getting started
This guide will help you get started with Lucide in your Svelte project. Make sure you have a Svelte environment set up. If you don't have one yet, you can create a new Svelte project using Vite, or any other Svelte boilerplate of your choice.
Installation
::: code-group
pnpm install @lucide/svelte
yarn add @lucide/svelte
npm install @lucide/svelte
bun add @lucide/svelte
:::
Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as a Svelte 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.
<script>
import Camera from '@lucide/svelte/icons/camera';
</script>
<Camera />
Props
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.
<script>
import Camera from '@lucide/svelte/icons/camera';
</script>
<Camera size={48} color="red" strokeWidth={1} />
More examples and details how to use props, continue the guide: