Guides
Installez glyphfox dans votre stack, découvrez les props qui comptent dans ce contexte et évitez les problèmes que d'autres ont déjà rencontrés. Tous les exemples fonctionnent avec les paquets actuels.
Frameworks
Un guide par framework, de l'installation au rendu côté serveur.
- Icônes ReactIcônes React avec glyphfox : installation, composants SVG compatibles avec le tree shaking, props, icônes par nom, modificateurs, Fusion, morph, refs et TypeScript.
- Icônes dans Next.jsIcônes Next.js avec glyphfox : frontière client pour l'App Router, SVG sans JavaScript dans les Server Components, Pages Router et icônes par nom côté serveur.
- Icônes Vue 3Icônes Vue 3 avec glyphfox : installation, composants compatibles avec le tree shaking, props dans les templates, morph via useMorph, fusion, icônes vides à éviter.
- Icônes dans NuxtIcônes Nuxt en SSR avec glyphfox : composants importés, noms enregistrés dans un plugin, wrapper auto-importé, morphs synchronisés et aucune icône vide.
- Icônes AngularIcônes Angular avec glyphfox et le composant standalone gf-icon : provideGlyphFox, inputs, fusion, modificateurs, routes lazy, SSR et applications zoneless.
- Icônes Svelte 5Icônes Svelte 5 avec glyphfox : installation, import des composants, props avec les runes, morph avec MorphIcon et morphStore, fusion d'icônes et bundles légers.
- Icônes dans SvelteKitIcônes SvelteKit avec glyphfox en SSR et prérendu : mise en place, layout racine pour les noms, endpoints SVG, adapter-static, hydratation et pièges courants.
- Icônes dans SolidJSIcônes SolidJS et SolidStart : deux options glyphfox dès aujourd'hui, l'élément glyph-fox avec attr: ou un petit composant sur le core compatible avec le tree shaking.
- Icônes PreactIcônes Preact avec glyphfox : les composants React via preact/compat avec Vite, webpack, esbuild et TypeScript, ou l'élément glyph-fox sans compat.
- Icônes dans QwikIcônes Qwik rendues côté serveur avec glyphfox : aucun JavaScript, rien à reprendre côté client, et l'élément glyph-fox seulement là où une icône doit réagir.
- Icônes dans AstroIcônes Astro avec glyphfox : rendu au build sans JavaScript côté client, composant Icon.astro, îles ou élément personnalisé pour l'animation.
- Icônes dans React NativeIcônes glyphfox dans React Native avec react-native-svg : SvgXml, imports par icône pour Metro, couleur, épaisseur, fusions, frames de morph et accessibilité.
- Icônes dans Lit et les web componentsUtilisez l'élément glyph-fox dans Lit et les web components : enregistrez toutes les icônes ou une partie, liez les attributs, stylisez-le, restez accessible.
- Icônes en HTML pur depuis un CDNAjoutez glyphfox à toute page HTML via une balise script : élément glyph-fox, placeholders data-glyph, API globale, version figée, quand créer un sous-ensemble.
Thèmes
Des guides valables pour tous les frameworks.
- Icônes Tailwind CSSIcônes Tailwind CSS v3 et v4 avec glyphfox : installation, classes gf, styles et épaisseurs après la barre oblique, badges, fusions, animations et options.
- Icônes animéesIcônes animées avec glyphfox : préréglages draw, pop, spin et shake, déclencheurs hover, click et state, morphs entre icônes, même en CSS pur, et mouvement réduit.
- Icônes accessiblesRendez vos icônes glyphfox accessibles : décoratives par défaut, titres et libellés, boutons sans texte, icônes d'état, contraste, mouvement réduit et RTL.
- Tree shaking des icônesTree shaking des icônes glyphfox (Vite, webpack, Rollup, esbuild) : tailles de bundle mesurées, ce qui l'empêche, icônes chargées par nom, sous-ensembles fixes.
- Sprites SVGUtilisez les icônes glyphfox en sprite SVG : id de symbole, références use, règle de même origine, sprite inline, sous-ensembles CLI, limites du CSS et cache.
- Rendu côté serveurRendez les icônes SVG glyphfox côté serveur : sortie par paquet, enregistrement des icônes par nom, chaînes toSvg, hydratation, animations et web component.