Receita

App Router do Next.js com Server Components

Renderize ícones em Server Components sem nenhum JavaScript e recorra a componentes de cliente só onde um ícone reage a cliques ou se transforma de um nome em outro.

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 e Fusion sem hooks. Eles renderizam SVG estático durante a renderização no servidor, então nada é enviado ao navegador por causa deles, e todos os ícones do conjunto ficam disponíveis pelo nome. Os estados vivos e os morphs de hover e de estado vão dentro do 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>
  );
}

Os módulos de glyphfox/react são marcados com 'use client', então os componentes de ícone também funcionam quando um Server Component os renderiza diretamente: eles são renderizados no servidor e hidratados. Use-os onde você precisar do trigger de clique, das transições de morph ou de useMorph.

Tamanho do bundle

next.config.mjs

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

Cada ícone é um módulo próprio. Com optimizePackageImports, o Next.js reescreve os imports de barrel para esses módulos; imports profundos como import { FileIcon } from 'glyphfox/react/icons/file' funcionam em qualquer lugar sem configuração.

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 longas de ícones estáticos, um sprite só com os ícones que você usa mantém o HTML pequeno e fica em cache entre as páginas.