Lucide Svelte

Implementation of the lucide icon library for svelte applications.

Installation

---

yarn add lucide-svelte
copy

or

npm install lucide-svelte
copy

How to use

---

All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.

Example

Default usage:

<script>
  import { Skull } from 'lucide-svelte';
</script>

<Skull />
copy

You can pass additional props to adjust the icon.

<script>
  import { Camera } from 'lucide-svelte';
</script>

<Camera color="#ff3e98" />
copy

Available props

* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on MDN

Example of custom props

<script>
  import { Phone } from 'lucide-svelte';
</script>

<Phone fill="#333" />
copy

This results a filled phone icon.

One generic icon component

It is possible to create one generic icon component to load icons.

⚠️ Example below importing all EsModules, caution using this example, not recommended when you bundle your application,the build size will grow strongly. Because it will import all the icons.

Icon Component Example

<script>
  import * as icons from 'lucide-svelte';
  export let name;
</script>

<svelte:component this="{icons[name]}" {...$$props} />
copy

Then you can use it like this

<script>
  import LucideIcon from './LucideIcon';
</script>

<LucideIcon name="Menu" />
copy