Lucide Svelte ​

Implementation of the lucide icon library for svelte applications.

Installation ​

yarn add lucide-svelte

or

npm install lucide-svelte

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 />

You can pass additional props to adjust the icon.

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

<Camera color="#ff3e98" />

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" />

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} />

Then you can use it like this ​

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

<LucideIcon name="Menu" />