svelte-lucide

Svelte-Lucide

Lucide-icons for Svelte

Installation

npm i -D svelte-lucide

In a svelte file:

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

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

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="40" />
<Airplay size="50" />

Color

Use the color prop to change colors.

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

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

Tailwind CSS suport

Use the class prop to change colors:

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

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

Dark mode with Tailwind CSS

If you use the dark mode on your website with Tailwind CSS, add it to the class prop.

As an example the dark mode class is dark.

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

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