Recipe

Remix and React Router

glyphfox/react renders on the server and hydrates in the browser, so it works in Remix and in React Router framework mode (the successor of Remix) without 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>
  );
}

Components are server rendered with the route and hydrate with it. Imports stay tree shakable with the Vite build.

Names during server rendering

app/root.tsx

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

registerIcons([iconCloud, iconLock]);

Icon components register themselves. Register icons you only reference by name (<Icon name="cloud" />, morphTo, Fusion) so the server render contains them.

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

The full sprite is a single cached file. For production, npx glyphfox build --type sprite makes one with only the icons you use.