Recette

App Router de Next.js avec les Server Components

Affichez des icônes dans des Server Components sans aucun JavaScript, et ne passez aux composants client que là où une icône réagit aux clics ou se transforme d'un nom à l'autre.

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 exporte des composants Icon et Fusion sans hooks. Ils produisent du SVG statique pendant le rendu côté serveur : rien n'est donc envoyé au navigateur pour eux, et toutes les icônes du set sont disponibles par leur nom. Les états animés et le morphing au survol ou selon l'état voyagent dans le SVG sous forme de CSS.

Composants client

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

Les modules de glyphfox/react sont marqués 'use client' : les composants d'icône fonctionnent donc aussi quand un Server Component les affiche directement, avec un rendu côté serveur puis une hydratation. Utilisez-les là où il vous faut le déclencheur au clic, les transitions de morphing ou useMorph.

Taille du bundle

next.config.mjs

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

Chaque icône est un module à part entière. Avec optimizePackageImports, Next.js réécrit les imports de barrel vers ces modules ; les imports profonds comme import { FileIcon } from 'glyphfox/react/icons/file' fonctionnent partout sans configuration.

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

Pour de longues listes d'icônes statiques, un sprite limité aux icônes que vous utilisez garde le HTML léger et reste en cache d'une page à l'autre.