Receita

Remix e React Router

O glyphfox/react renderiza no servidor e hidrata no navegador, então funciona no Remix e no modo framework do React Router (o sucessor do Remix) sem configuração.

Rotas

app/routes/_index.tsx

import { HomeIcon, FileIcon, MorphIcon } from 'glyphfox/react';
import { useState } from 'react';

export default function Index() {
  const [open, setOpen] = useState(false);
  return (
    <nav>
      <HomeIcon size={20} />
      <FileIcon modifier="check" variant="duotone" />
      <button onClick={() => setOpen(!open)}>
        <MorphIcon name={open ? 'x' : 'menu'} />
      </button>
    </nav>
  );
}

Os componentes são renderizados no servidor junto com a rota e hidratam com ela. Os imports continuam com tree shaking no build do Vite.

Nomes na renderização no servidor

app/root.tsx

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

registerIcons([iconCloud, iconLock]);

Os componentes de ícone se registram sozinhos. Registre os ícones que você só referencia pelo nome (<Icon name="cloud" />, morphTo, Fusion) para que a renderização no servidor os contenha.

Um sprite em cache

app/root.tsx

import sprite from 'glyphfox/sprite.svg?url';

export const links = () => [{ rel: 'preload', href: sprite, as: 'image', type: 'image/svg+xml' }];

export function Glyph({ name }: { name: string }) {
  return (
    <svg width="20" height="20" aria-hidden="true">
      <use href={`${sprite}#gf-${name}`} />
    </svg>
  );
}

O sprite completo é um único arquivo em cache. Para produção, npx glyphfox build --type sprite gera um só com os ícones que você usa.