Receta

Remix y React Router

glyphfox/react se renderiza en el servidor y se hidrata en el navegador, así que funciona en Remix y en el modo framework de React Router (el sucesor de Remix) sin configuración.

Rutas

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>
  );
}

Los componentes se renderizan en el servidor con la ruta y se hidratan con ella. Los imports siguen siendo compatibles con tree shaking en el build de Vite.

Nombres durante el renderizado en el servidor

app/root.tsx

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

registerIcons([iconCloud, iconLock]);

Los componentes de icono se registran solos. Registra los iconos que solo referencias por nombre (<Icon name="cloud" />, morphTo, Fusion) para que el renderizado en el servidor los incluya.

Un sprite en caché

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>
  );
}

El sprite completo es un único archivo en caché. Para producción, npx glyphfox build --type sprite genera uno solo con los iconos que usas.