svelte-lucide

Svelte-Lucide

Lucide-icons for Svelte. Support all major CSS frameworks using the class prop.

Installation

npm i -D svelte-lucide

Icon list

Icon list

Icon images

Icon images

Usage

In a svelte file:

<script>
  import { Accessibility, Activity, Airplay } from "svlete-lucide";
</script>

<Accessibility />
<Activity />
<Airplay />

Faster compiling

For faster compilation, you can import the icon directly.

<script>
  import Accessibility from 'svelte-lucide/Accessibility.svelte';
</script>

<Accessibility />

If you are TypeScript user, this require "typescript": "^5.0.0".
As of March 2023, the typescript@beta version is now available:

pnpm i -D typescript@beta

To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.

{
  //...
  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"
  }
}

REPL

Demo 1

Size

Use the size prop to change the size of icons.

<script>
  import { Accessibility, Activity, Airplay } from "svlete-lucide";
</script>

<Accessibility size="30" />
<Activity size="42" />
<Airplay size="51" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.

<script>
  import { Accessibility, Activity, Airplay } from "svlete-lucide";
</script>

<Accessibility color="#c61515" />
<Activity color="#3759e5" />
<Airplay color="#3fe537" />

CSS frameworks suport

Use the class prop to change colors and add additional css.
Tailwind example:

<script>
  import { Accessibility, Activity, Airplay } from "svlete-lucide";
</script>

<Accessibility class="text-blue-700 mr-4" />
<Activity class="text-red-700" />
<Airplay class="text-green-500" />

Bootstrap example:

<Accessibility class="position-absolute top-0 px-1" />

Dark mode with Tailwind CSS

If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.
Let's use dark for the dark mode class as an example.

<script>
  import { Accessibility, Activity, Airplay } from "svlete-lucide";
</script>

<Accessibility class="text-blue-700 dark:text-red-500" />
<Activity class="text-red-700 dark:text-green-500" />
<Airplay class="text-green-500 dark:text-blue-500" />

Unfocusable icon

If you want to make an icon unfocusable, add tabindex="-1".

<Airplay tabindex="-1" />

Passing down other attributes

You can pass other attibutes as well.

<Airplay tabindex="0" />

Using svelte:component

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

<svelte:component this="{Airplay}" />

Import all

REPL
Use import * as Icon from 'svelte-lucide.

<script>
  import * as Icon from 'svelte-lucide'
</script>

<h1>Size</h1>
<Icon.Activity size="30"/>
<Icon.Activity size="40"/>
<Icon.Activity size="50"/>

<h1>CSS HEX color</h1>
<Icon.Bike color="#c61515" size="40"/>

<h1>Tailwind CSS</h1>
<Icon.Users class="text-blue-500" />
<Icon.Users class="text-pink-700" />

Other icons

• Svelte-Icon-Sets

Experience lightning-fast browsing and offline access with Our PWA

This website can be downloaded and installed on your device for offline access as a Progressive Web App.
To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".