Reicon Svelte

Svelte icon components for 2680+ icons in 2 weights (Outline & Filled) — tree-shakeable, TypeScript-ready, zero config.

Install

npm i reicon-svelte
# or
bun add reicon-svelte

Usage

<script>
  import { Home, ShieldCheck, AltArrowDown } from 'reicon-svelte';
</script>

<Home />
<ShieldCheck size={32} color="#d97757" />
<AltArrowDown weight="Filled" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | string | 24 | Icon size (number = px) | | color | string | currentColor | Primary icon color | | weight | 'Outline' | 'Filled' | Outline | Icon weight / style | | strokeWidth | number | string | — | Override stroke width |

Plus all standard SVG attributes.

Weights

• Outline — clean outlined style (default)
• Filled — solid filled style

<Home />                              <!-- Outline (default) -->
<Home weight="Filled" />              <!-- Filled -->
<Home weight="Filled" color="red" />

Direct icon import (smallest bundle)

import Home from 'reicon-svelte/icons/Home.svelte';

Icon Names

Icons use PascalCase names derived from their kebab-case originals:

| Original | Import | |----------|--------| | home | Home | | shield-check | ShieldCheck | | alt-arrow-down | AltArrowDown | | shopping-cart | ShoppingCart |

TypeScript

Full TypeScript support out of the box.

License

MIT © devchauhan