Setup

Icon Componentization

Turn icons into reusable components for easy, consistent use.

Guide

Choose Icon

Visit Iconify for icons then copy the SVG snippet you want.

Create the Icon Component

1
<script lang="ts">
2
    import type { SVGAttributes } from 'svelte/elements';
3
    import type { Snippet } from 'svelte';
4
    import { twMerge } from 'tailwind-merge';
5

6
    type Props = SVGAttributes<SVGSVGElement> & {
7
        children?: Snippet;
8
        class?: string;
9
    };
10

11
    let { children, class: className, ...props }: Props = $props();
12
</script>
13

14
<!-- Note: Remove width and height -->
15
<!-- Note: Use class property to set size -->
16
<svg xmlns="http://www.w3.org/2000/svg" class={twMerge('max-w-6 min-w-6', className)} viewBox="0 0 24 24" {...props}>
17
    <!-- Note: Use currentColor to inherit colors. -->
18
    <path fill="currentColor" d="M3 18v-2h18v2zm0-5v-2h18v2zm0-5V6h18v2z" />
19
</svg>
20

Use the Icon

We can now use it just like a simple component.

/// DEMO ///

///

1
<script>
2
    import IconMenu from '$lib/components/icons/icon-menu.svelte';
3
</script>
4

5
<IconMenu class="bg-primary text-primary-fg max-w-12 min-w-12" />
6

Share treats:

Copyright © 2025 - Cliemtor Fabros