Rezept

SvelteKit

glyphfox/svelte liefert .svelte-Quellen, die SvelteKit mit dem Rest deiner App kompiliert, daher rendern Icons auf dem Server, werden zu statischem HTML vorgerendert und hydriert.

Seiten und Komponenten

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" />

Eine Vite-Konfiguration ist nicht nötig: Das Paket stellt die Export-Bedingung svelte bereit, die SvelteKit für Server- und Client-Builds auflöst.

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} />

Jedes Icon ist außerdem eine eigene Komponentendatei, was Entwicklungsserver in großen Apps schnell hält.

Prerendering und Namen

src/routes/+layout.js

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

registerIcons([iconCloud, iconLock]);

export const prerender = true;

Vorgerenderte Seiten enthalten das vollständige SVG-Markup. Registriere die Icons, die du nur über den Namen ansprichst (<Icon name="cloud" />, morphTo, Fusion), damit sie Teil des Server-Renderings sind, statt im Browser zu laden.

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>