Icons
A typed icon component with size variants, Lucide icons, and a custom icon set.
Loading preview…
1<script lang="ts">
2 import Icon from './icon/icon.svelte';
3</script>
4
5<div class="flex items-center gap-4">
6 <Icon icon="aperture" size="lg" />
7 <Icon icon="nav-arrow" size="md" />
8 <Icon icon="shopping-cart" size="md" />
9</div>
10Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/icons/index.ts
- ~/components/icons/icons.ts
- ~/components/icons/icon/icon.svelte
- ~/components/icons/icon/icon.types.ts
- ~/components/icons/icon/icon.variants.ts
- ~/components/icons/icon-grid.svelte
- ~/components/icons/icon-gallery.svelte
- ~/components/icons/icon-set/types.ts
- ~/components/icons/icon-set/nav-arrow.svelte
- ~/components/icons/icon-set/x-circle-solid.svelte
- ~/components/icons/icon-set/cloud.svelte
- ~/components/icons/icon-set/key-rounded.svelte
- ~/components/icons/icon-set/mail-rounded.svelte
Usage
Use Icon with a typed icon key and optional size. Browse the whole set with IconGallery, or
import individual SVGs from icon-set directly.
1<script lang="ts">
2 import { Icon } from '~/components/icons';
3</script>
4
5<Icon icon="chevron-right" size="md" />
6<Icon icon="shopping-cart" size="lg" />