Rezept

Remix und React Router

glyphfox/react rendert auf dem Server und hydriert im Browser, daher funktioniert es ohne Konfiguration in Remix und im Framework-Modus von React Router (dem Nachfolger von Remix).

Routen

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

Komponenten werden mit der Route auf dem Server gerendert und mit ihr hydriert. Mit dem Vite-Build bleiben die Imports Tree-Shaking-fähig.

Namen beim Server-Rendering

app/root.tsx

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

registerIcons([iconCloud, iconLock]);

Icon-Komponenten registrieren sich selbst. Registriere Icons, die du nur über den Namen ansprichst (<Icon name="cloud" />, morphTo, Fusion), damit das Server-Rendering sie enthält.

Ein gecachtes Sprite

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

Das vollständige Sprite ist eine einzige gecachte Datei. Für die Produktion erzeugt npx glyphfox build --type sprite eines mit nur den Icons, die du nutzt.