Receta

SvelteKit

glyphfox/svelte incluye fuentes .svelte que SvelteKit compila con el resto de tu app, así que los iconos se renderizan en el servidor, se prerenderizan a HTML estático y se hidratan.

Páginas y componentes

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 hace falta configurar Vite: el paquete expone la condición de export svelte, que SvelteKit resuelve para los builds de servidor y de cliente.

Imports profundos

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

Cada icono es también su propio archivo de componente, lo que mantiene rápidos los servidores de desarrollo en apps grandes.

Prerenderizado y nombres

src/routes/+layout.js

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

registerIcons([iconCloud, iconLock]);

export const prerender = true;

Las páginas prerenderizadas contienen el marcado SVG completo. Registra los iconos que solo referencias por nombre (<Icon name="cloud" />, morphTo, Fusion) para que formen parte del renderizado en el servidor en lugar de cargarse en el navegador.

Store de morph

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>