Recette

Remix et React Router

glyphfox/react fait le rendu côté serveur et s'hydrate dans le navigateur : il fonctionne donc dans Remix et dans le mode framework de React Router (le successeur de Remix) sans configuration.

Routes

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

Les composants sont rendus côté serveur avec la route et s'hydratent avec elle. Les imports restent compatibles tree shaking avec le build Vite.

Noms pendant le rendu côté serveur

app/root.tsx

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

registerIcons([iconCloud, iconLock]);

Les composants d'icône s'enregistrent d'eux-mêmes. Enregistrez les icônes que vous ne référencez que par leur nom (<Icon name="cloud" />, morphTo, Fusion) pour que le rendu côté serveur les contienne.

Un sprite en 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>
  );
}

Le sprite complet est un seul fichier mis en cache. Pour la production, npx glyphfox build --type sprite en crée un avec uniquement les icônes que vous utilisez.