Recipe

SvelteKit

glyphfox/svelte ships .svelte sources that SvelteKit compiles with the rest of your app, so icons render on the server, prerender to static HTML and hydrate.

Pages and components

src/routes/+page.svelte

<script>
  import { HomeIcon, HeartIcon, Fusion } from 'glyphfox/svelte';
  let liked = $state(false);
</script>

<HomeIcon size={20} class="logo" />
<button onclick={() => (liked = !liked)}>
  <HeartIcon animate="pop" trigger="state" active={liked} variant={liked ? 'solid' : 'outline'} />
</button>
<Fusion icons={['user', 'shield']} layout="badge" />

No Vite configuration is needed: the package exposes the svelte export condition, which SvelteKit resolves for server and client builds.

Deep imports

src/lib/Toolbar.svelte

<script>
  import FileIcon from 'glyphfox/svelte/icons/file';
  import SearchIcon from 'glyphfox/svelte/icons/search';
</script>

<FileIcon weight={1.5} />
<SearchIcon size={18} />

Each icon is also its own component file, which keeps development servers fast in large apps.

Prerendering and names

src/routes/+layout.js

import { registerIcons } from 'glyphfox/svelte';
import { iconCloud, iconLock } from 'glyphfox';

registerIcons([iconCloud, iconLock]);

export const prerender = true;

Prerendered pages contain the full SVG markup. Register the icons you only reference by name (<Icon name="cloud" />, morphTo, Fusion) so they are part of the server render instead of loading in the browser.

Morph store

src/lib/Player.svelte

<script>
  import { Icon, morphStore } from 'glyphfox/svelte';
  const glyph = morphStore('play');
  let playing = $state(false);
  const toggle = () => {
    playing = !playing;
    glyph.set(playing ? 'pause' : 'play');
  };
</script>

<button onclick={toggle}>
  {#if $glyph}<Icon icon={$glyph.icon} size={28} />{/if}
</button>