Receta

App Router de Next.js con Server Components

Renderiza iconos en Server Components sin nada de JavaScript y recurre a componentes de cliente solo donde un icono reacciona a clics o se transforma de un nombre a otro.

Server Components

app/page.tsx

import { Icon, Fusion } from 'glyphfox/react/server';

export default function Page() {
  return (
    <main>
      <h1>
        <Icon name="home" size={28} className="title-icon" /> Dashboard
      </h1>
      <Icon name="file+check@tr" variant="duotone" title="Saved" />
      <Icon name="bell" animate="shake" trigger="hover" />
      <Icon name="menu" morphTo="x" trigger="hover" />
      <Fusion icons={['cloud', 'lock']} layout="overlap" />
    </main>
  );
}

glyphfox/react/server exporta componentes Icon y Fusion sin hooks. Renderizan SVG estático durante el renderizado en el servidor, así que no se envía nada al navegador por ellos, y todos los iconos del set están disponibles por nombre. Los estados vivos y los morphs de hover y de estado viajan dentro del SVG como CSS.

Componentes de cliente

app/like-button.tsx

'use client';

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

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)} aria-pressed={liked}>
      <HeartIcon animate="pop" trigger="state" active={liked} variant={liked ? 'solid' : 'outline'} />
      <MorphIcon name={liked ? 'check' : 'heart'} />
    </button>
  );
}

Los módulos de glyphfox/react están marcados con 'use client', así que los componentes de icono también funcionan cuando un Server Component los renderiza directamente: se renderizan en el servidor y se hidratan. Úsalos donde necesites el trigger de clic, las transiciones de morph o useMorph.

Tamaño del bundle

next.config.mjs

/** @type {import('next').NextConfig} */
export default {
  experimental: {
    optimizePackageImports: ['glyphfox'],
  },
};

Cada icono es su propio módulo. Con optimizePackageImports, Next.js reescribe los imports de barrel hacia esos módulos; los imports profundos como import { FileIcon } from 'glyphfox/react/icons/file' funcionan en cualquier sitio sin configuración.

Sprite

terminal

npx glyphfox build home search file+check --type sprite --out public/icons

app/nav.tsx

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

Para listas largas de iconos estáticos, un sprite con solo los iconos que usas mantiene el HTML pequeño y se guarda en caché entre páginas.