Receita

SvelteKit

O glyphfox/svelte vem com fontes .svelte que o SvelteKit compila junto com o resto da sua aplicação, então os ícones renderizam no servidor, são pré-renderizados em HTML estático e hidratam.

Páginas e 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" />

Não é preciso configurar o Vite: o pacote expõe a condição de export svelte, que o SvelteKit resolve nos builds de servidor e 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 ícone também é um arquivo de componente próprio, o que mantém os servidores de desenvolvimento rápidos em aplicações grandes.

Pré-renderização e nomes

src/routes/+layout.js

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

registerIcons([iconCloud, iconLock]);

export const prerender = true;

As páginas pré-renderizadas contêm o markup SVG completo. Registre os ícones que você só referencia pelo nome (<Icon name="cloud" />, morphTo, Fusion) para que façam parte da renderização no servidor em vez de carregar no 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>