Tout ce que glyphfox sait faire

Installation

npm install glyphfox
# Angular
npm install glyphfox-angular

glyphfox n'a aucune dépendance. React, Vue, Svelte, Solid, Preact, Qwik, Lit, Astro, React Native, Ember et Tailwind CSS sont des peer dependencies facultatives, utilisées uniquement si vous importez leurs points d'entrée.

React

Chaque icône est un composant forwardRef compatible tree shaking, nommé d'après l'icône : arrow-right devient ArrowRightIcon. className, style et tous les attributs SVG sont transmis au svg.

import { HomeIcon, FileIcon, Icon, Fusion, MorphIcon, useMorph } from 'glyphfox/react';

export function App({ open, saved }) {
  return (
    <nav>
      <HomeIcon />
      <FileIcon size={20} weight={1.5} modifier={saved ? 'check' : undefined} />
      <Icon name="cloud&lock:overlap" variant="duotone" />
      <Fusion icons={['user', 'shield']} layout="badge" />
      <MorphIcon name={open ? 'x' : 'menu'} duration={300} />
    </nav>
  );
}

useMorph(name, options) renvoie des données d'icône qui se transforment à chaque changement de nom, pour vos propres moteurs de rendu. registerIcons(icons) rend les noms disponibles de façon synchrone, par exemple lors du rendu côté serveur.

Vue

<script setup>
import { ref } from 'vue';
import { HomeIcon, Fusion, MorphIcon } from 'glyphfox/vue';
const playing = ref(false);
</script>

<template>
  <HomeIcon :size="32" color="#ff7a1a" variant="duotone" />
  <Fusion :icons="['file', 'check']" layout="badge" />
  <MorphIcon :name="playing ? 'pause' : 'play'" @click="playing = !playing" />
</template>

Les props portent les mêmes noms ; dans les templates, vous pouvez aussi les écrire en kebab-case (secondary-color). Le composable useMorph(nameRef) est l'équivalent du hook React.

Svelte

<script>
  import { HeartIcon, Fusion, morphStore } from 'glyphfox/svelte';
  let liked = $state(false);
  const icon = morphStore('menu');
</script>

<button onclick={() => (liked = !liked)}>
  <HeartIcon animate="pop" trigger="state" active={liked} variant={liked ? 'solid' : 'outline'} />
</button>
<Fusion icons={['message-circle', 'heart']} layout="overlap" />

Pour Svelte 5. Les composants sont livrés sous forme de fichiers .svelte compilés par votre application. morphStore(name) est un store qui se transforme à chaque set(name).

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { iconHome, iconFile, iconCheck } from 'glyphfox';
import { provideGlyphFox } from 'glyphfox-angular';

bootstrapApplication(App, {
  providers: [provideGlyphFox({ icons: [iconHome, iconFile, iconCheck], defaults: { weight: 1.75 } })],
});

import { Component } from '@angular/core';
import { GlyphFoxIcon } from 'glyphfox-angular';

@Component({
  selector: 'app-toolbar',
  imports: [GlyphFoxIcon],
  template: `
    <gf-icon name="home"></gf-icon>
    <gf-icon name="file+check@tr" variant="duotone" [size]="20"></gf-icon>
    <gf-icon [icons]="['cloud', 'lock']" layout="overlap"></gf-icon>
  `,
})
export class Toolbar {}

glyphfox-angular est publié au format de paquet Angular, construit avec ng-packagr. GlyphFoxIcon est un composant standalone ; provideGlyphFox enregistre les icônes par nom ainsi que les props par défaut.

Composant web et CDN

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>
<!-- or https://unpkg.com/glyphfox@1 -->

<glyph-fox name="home"></glyph-fox>
<glyph-fox name="file+check" size="32" weight="1.5"></glyph-fox>
<glyph-fox name="cloud&lock" layout="overlap"></glyph-fox>
<glyph-fox name="menu" morph duration="300"></glyph-fox>

Un seul fichier avec toutes les icônes, l'élément et le runtime pour HTML pur. Chaque prop devient un attribut en kebab-case. Avec un bundler, importez glyphfox/web, ou glyphfox/web/element pour n'enregistrer que vos icônes. L'attribut morph anime chaque changement de name.

Tailwind CSS

/* Tailwind v4 */
@import "tailwindcss";
@plugin "glyphfox/tailwind";

/* Tailwind v3: plugins: [require('glyphfox/tailwind')] */

<span class="gf-home text-2xl text-orange-500"></span>
<span class="gf-[file+check] gf-spin"></span>
<span class="gf-[cloud&lock]/side"></span>
<span class="gf-heart/solid-sharp-w1.5"></span>

Les icônes sont rendues sous forme de masques CSS en currentColor : les utilitaires de couleur, de taille et d'opacité s'appliquent donc. Après la barre oblique, vous pouvez combiner des axes, une disposition de fusion ou un coin de badge avec des traits d'union. Tailwind v4 n'accepte + et & qu'entre crochets ; la v3 accepte aussi gf-file+check.

HTML pur

<script type="module" src="https://cdn.jsdelivr.net/npm/glyphfox@1/dist/runtime/auto.js"></script>

<i data-glyph="search" data-size="20" data-variant="duotone"></i>

Le runtime remplace chaque élément doté de data-glyph par du SVG inline, y compris les éléments ajoutés plus tard. Les props sont des attributs data en kebab-case.

JavaScript

import { toSvg, fuse, createMorph, search, getIcon, icons } from 'glyphfox';

toSvg('file', { size: 32, color: '#ff7a1a', variant: 'solid' });
toSvg('menu', { morphTo: 'x', trigger: 'hover' }); // CSS only morph
fuse(['cloud', 'lock'], { layout: 'overlap', gap: 1 }); // icon data that passes the lint
createMorph(getIcon('play'), getIcon('pause')).frame(0.5);
search('arrow', { limit: 10 });

Le paquet fournit aussi icons.json, sprite.svg, styles.css, glyphfox/core (le moteur sans les données des icônes) et glyphfox/tools (lint et Fox-ify).

Frameworks et recettes

Les mêmes props existent en paquets pour Solid, Preact, Qwik, Lit, Astro, React Native et Ember, ainsi qu'en Server Components sans hooks pour React. Les recettes couvrent Next.js, Nuxt, SvelteKit, Remix, Alpine et htmx.

Tous les frameworks et recettes (en anglais)

Props

Les mêmes props, avec les mêmes noms et le même sens, dans React, Vue, Svelte, Angular, le composant web et toSvg. S'y ajoutent class et style, transmis au svg (ou à l'élément hôte pour Angular et le composant web).

Syntaxe des noms

Commune au composant web, au CDN, à Tailwind, à la CLI, au composant Icon et à toSvg.

Axes variables

L'épaisseur va de 1 à 3. Sous 24 px, le trait s'épaissit légèrement pour que les petites icônes gardent leur présence ; absoluteWeight désactive ce comportement. Les angles alternent entre jointures et extrémités arrondies ou vives. Le style plein remplit les formes extérieures fermées et évide les lignes intérieures en espace négatif ; il est calculé à la compilation pour le jeu d'icônes et au rendu pour les fusions et les modificateurs.

Morphing

Les tracés sont aplatis en brins, appariés par une affectation optimale, rééchantillonnés au même nombre de points, alignés puis interpolés. Les brins sans partenaire rétrécissent et s'estompent. Des indications réglées à la main couvrent les paires courantes. Sans JavaScript, toSvg avec morphTo renvoie un SVG qui se transforme grâce à une transition CSS de la propriété d, avec un fondu enchaîné là où elle n'est pas prise en charge.

Fusion

fuse combine de 2 à 10 icônes en une seule icône qui passe toujours le lint. Dispositions : overlap, side, stack, grid (2x2, 3x3 et 10 emplacements), orbit, badge et inside. Les éléments sont mis à l'échelle et calés sur la grille, et l'élément de derrière est découpé autour de celui de devant avec un espace de découpe. Options : layout, gap, weight, scale et offsets.

États animés

Chaque préréglage est une petite feuille de style intégrée au SVG : il fonctionne donc partout où va le SVG. draw trace les traits dans l'ordre du dessin, shake balance l'icône depuis le haut. Déclencheurs : mount, hover (l'icône ou son parent direct), click (rejoue à chaque clic) et state (joue tant que active est vrai). La réduction des animations les désactive toutes.

Modificateurs

Onze badges dans quatre coins. L'icône en dessous est découpée géométriquement autour du badge : le résultat est une icône ordinaire qui passe le lint, dans toutes les épaisseurs.

CLI

npx glyphfox search arrow
npx glyphfox show file+check --variant solid
npx glyphfox copy heart --format jsx --size 32
npx glyphfox fuse cloud lock --layout overlap --out cloud-lock.svg
npx glyphfox morph menu x --trigger hover --out menu.svg
npx glyphfox build home search file+check --type sprite --out public/icons
npx glyphfox build --from icons.txt --type package --name @acme/icons
npx glyphfox lint my-icon.svg
npx glyphfox foxify any.svg --out fox.svg
npx glyphfox export android home search --out app/src/main/res

copy affiche l'extrait et le place dans le presse-papiers (formats : svg, jsx, vue, svelte, angular, html, tailwind, cdn, datauri). build génère un sprite, un fichier CSS avec des classes de masque ou un petit paquet à partir d'une liste. Chaque commande accepte les props partagées sous forme d'options, par exemple --weight 1.5 --corners sharp.

Collections

Deux collections signature sont livrées dans le paquet à côté du jeu de base : display, 60 icônes dessinées sur une grille de 48 pour les états vides, l’onboarding et les grandes tuiles, et isometric, 30 icônes en projection isométrique sur la grille de 24. Écrivez leurs noms display/NAME et isometric/NAME dans toSvg, le web component, le build CDN et le composant Icon. Leurs données viennent de glyphfox/collections, et les composants React, Vue et Svelte de glyphfox/react/collections, glyphfox/vue/collections et glyphfox/svelte/collections : les entrées par défaut restent aussi légères qu’avant.

import { toSvg } from 'glyphfox';
import { DisplayCalendarClockIcon } from 'glyphfox/react/collections';

toSvg('display/calendar-clock', { size: 96, weight: 3 });
toSvg('isometric/cube', { variant: 'solid' });

<glyph-fox name="display/rocket-launch" size="64"></glyph-fox>

La taille, la couleur, la graisse, la rotation, les retournements et les animations prédéfinies marchent sur les deux. Les icônes display font 48 px par défaut et mesurent la graisse en unités de leur grille de 48, donc la graisse 2 garde le trait dessiné. Les styles solid et duotone, les modificateurs, la fusion et les morphs sont faits pour la grille de 24 : les icônes display restent en contour, et une fusion ou un modificateur avec l’une d’elles est une erreur. Les icônes isométriques prennent en charge toutes les fonctions du jeu de base.

Règles des icônes

Uniquement des dessins originaux, sur une grille de 24 sur 24 : viewBox 0 0 24 24, aucun remplissage, stroke currentColor, épaisseur de trait 2, extrémités et angles arrondis, marge de 2 px, aucune transformation, et aucun remplissage hormis un calque duotone facultatif avec la classe gf-secondary. Les sources se trouvent dans icons/NAME.svg, avec un fichier annexe NAME.json pour les catégories et les étiquettes, et tools/icons/lint.mjs les vérifie.

Icônes sociales

La catégorie social réunit les icônes de marque des réseaux vers lesquels on renvoie le plus, d'Instagram, WhatsApp, Facebook, X, TikTok et YouTube à GitHub, Discord, Spotify et Steam. Chacune s'appelle brand-NAME, est dessinée comme le contour du logo sur la même grille et avec le même trait que le reste du jeu, et porte comme tags le nom du réseau, ses anciens noms, social, logo et brand.

import { BrandInstagramIcon } from 'glyphfox/react';

<a href="https://www.instagram.com/yourname" aria-label="Instagram">
  <BrandInstagramIcon size={20} />
</a>

Les icônes de marque sont des marques déposées de leurs propriétaires et doivent être utilisées selon les règles de chaque marque.