Implementation of the lucide icon library for svelte applications.
What is lucide? Read it here.
yarn add lucide-svelte
or
npm install lucide-svelte
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.
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 />
name | type | default |
---|---|---|
size |
Number | 24 |
color |
String | currentColor |
strokeWidth |
Number | 2 |
*<SVGProps> |
String | - |
- All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on MDN
<script>
import { Phone } from 'lucide-svelte'
</script>
<Phone fill="#333"/>
This results a filled phone icon.
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.
<script>
import * as icons from "lucide-svelte";
export let name;
</script>
<svelte:component this={icons[name]} {...$$props}/>
<script>
import LucideIcon from "./LucideIcon";
</script>
<LucideIcon name="Menu" />