packages/icons-svelte-runes/README.md
This package is specifically built for Svelte 5+ using the new runes reactivity system ($props(), $derived, etc.).
@tabler/icons-svelte-runes)@tabler/icons-sveltepnpm add @tabler/icons-svelte-runes
or
npm install @tabler/icons-svelte-runes
or
yarn add @tabler/icons-svelte-runes
@tabler/icons-svelte insteadIt's built with ES modules so it's completely tree-shakable. Each icon can be imported as a component.
<script lang="ts">
import { IconHeart } from '@tabler/icons-svelte-runes';
</script>
<IconHeart />
You can pass additional props to adjust the icon:
<IconHeart size={48} stroke={1} color="red" />
| name | type | default |
|---|---|---|
size | number | string | 24 |
color | string | currentColor |
stroke | number | string | 2 |
class | string | '' |
All other HTML attributes are forwarded to the SVG element.
The package includes full TypeScript definitions. Icons are typed as Svelte 5 Component<IconProps>:
import type { Icon } from '@tabler/icons-svelte-runes';
import { IconHeart } from '@tabler/icons-svelte-runes';
// Icon is compatible with Svelte 5's Component type
const MyIcon: Icon = IconHeart;
When passing icons as props, use the Component type or any for maximum compatibility:
<script lang="ts">
import type { Component } from 'svelte';
import { IconHeart } from '@tabler/icons-svelte-runes';
interface Props {
icon: Component<any>;
label: string;
}
let { icon: Icon, label }: Props = $props();
</script>
<button>
<Icon size={20} />
{label}
</button>
<script lang="ts">
import { IconHeart, IconStar, IconHome } from '@tabler/icons-svelte-runes';
</script>
<IconHeart />
<IconStar size={32} color="gold" />
<IconHome stroke={1.5} class="my-icon" />
<script lang="ts">
import { IconHeart, IconStar, IconCircle } from '@tabler/icons-svelte-runes';
const icons = {
heart: IconHeart,
star: IconStar,
circle: IconCircle
};
let selected = $state('heart');
let DynamicIcon = $derived(icons[selected]);
</script>
<DynamicIcon size={32} />
<button onclick={() => selected = 'heart'}>Heart</button>
<button onclick={() => selected = 'star'}>Star</button>
<button onclick={() => selected = 'circle'}>Circle</button>
<script lang="ts">
import { IconHeart } from '@tabler/icons-svelte-runes';
let isLarge = $state(false);
let iconSize = $derived(isLarge ? 48 : 24);
</script>
<IconHeart size={iconSize} />
<button onclick={() => isLarge = !isLarge}>Toggle Size</button>
The API is identical, just change the package name:
- import { IconHeart } from '@tabler/icons-svelte';
+ import { IconHeart } from '@tabler/icons-svelte-runes';
No other changes needed! Your existing props and usage remain the same.
Internally, this package uses Svelte 5's new features:
$props() instead of export let$derived for computed valuesComponent typeResult: Better performance and smaller bundle sizes in Svelte 5 projects!
If you want to support this project, you can become a sponsor on GitHub or just donate on PayPal :)
<a href="https://github.com/sponsors/codecalm"> </a>For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Tabler Icons is licensed under the MIT License.
<a href="https://github.com/sponsors/codecalm" target="_blank"></a>