Recette

SvelteKit

glyphfox/svelte fournit des sources .svelte que SvelteKit compile avec le reste de votre application : les icônes sont donc rendues côté serveur, prérendues en HTML statique, puis hydratées.

Pages et composants

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

Aucune configuration Vite n'est nécessaire : le paquet expose la condition d'export svelte, que SvelteKit résout pour les builds serveur et client.

Imports profonds

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

Chaque icône est aussi un fichier de composant à part, ce qui garde les serveurs de développement rapides dans les grosses applications.

Prérendu et noms

src/routes/+layout.js

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

registerIcons([iconCloud, iconLock]);

export const prerender = true;

Les pages prérendues contiennent tout le balisage SVG. Enregistrez les icônes que vous ne référencez que par leur nom (<Icon name="cloud" />, morphTo, Fusion) pour qu'elles fassent partie du rendu côté serveur au lieu de se charger dans le navigateur.

Store de morphing

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>