Des icônes qui affichent des données, s'adaptent au lecteur et signalent un état

Icônes de données

Chaque icône de données est dessinée sur la même grille de 24, avec le même trait, les mêmes extrémités et la même marge que le reste du jeu : les props size, color, weight, corners, variant, animate et title fonctionnent donc comme d'habitude. La value va de 0 à 1. Une valeur supérieure à 1 sans max est lue comme un pourcentage, et min avec max font correspondre des valeurs réelles, comme une température.

import { SmartIcon } from 'glyphfox/react';

export function DeviceStatus({ battery, charging, signal, volume, upload }) {
  return (
    <>
      <SmartIcon kind="battery" value={battery} charging={charging} title="auto" />
      <SmartIcon kind="signal" value={signal} max={4} />
      <SmartIcon kind="wifi" value={0.66} />
      <SmartIcon kind="volume" value={volume} muted={volume === 0} />
      <SmartIcon kind="progress" value={upload} label />
      <SmartIcon kind="thermometer" value={21.5} min={-10} max={40} unit="°C" />
    </>
  );
}

Chaque icône porte des classes pour son état (gf-low, gf-full, gf-charging, gf-muted, gf-hot, gf-cold), et les barres et arcs éteints portent gf-off, pour qu'une feuille de style puisse les colorer. title="auto" donne à l'icône un nom accessible qui décrit les données, par exemple « Battery 64% », avec des nombres formatés selon les paramètres régionaux.

Calendrier et horloge

Le calendrier affiche la date du jour par défaut, ou la date que vous passez (une Date, un timestamp ou « 2026-10-23 »), avec les chiffres de la locale. L'horloge affiche l'heure actuelle, ou un time donné (« 09:30 », « 18:45:10 » ou une Date) ; seconds ajoute la trotteuse. Avec tick, l'horloge et le calendrier suivent l'heure réelle et se mettent à jour une fois par seconde, par minute ou à minuit.

<glyph-fox-smart kind="calendar" tick></glyph-fox-smart>
<glyph-fox-smart kind="calendar" date="2026-12-25" locale="ar-EG"></glyph-fox-smart>
<glyph-fox-smart kind="clock" tick seconds></glyph-fox-smart>
<glyph-fox-smart kind="clock" time="09:30"></glyph-fox-smart>

Fichiers et badges

L'icône de fichier affiche son extension (jusqu'à quatre lettres) à partir de ext ou d'un filename. Le badge place un nombre de notifications sur la cloche, ou sur toute icône passée dans icon, avec la même découpe que les modificateurs. Au-delà de max (99), le nombre s'affiche « 99+ », 0 masque la bulle et dot affiche un point. badgeColor colore la bulle ; le nombre y est évidé, il reste donc lisible sur n'importe quel fond.

<script setup>
import { SmartIcon } from 'glyphfox/vue';
defineProps({ unread: Number, file: String });
</script>

<template>
  <SmartIcon kind="badge" :count="unread" badge-color="#e5484d" />
  <SmartIcon kind="badge" icon="mail" :count="unread" :max="9" />
  <SmartIcon kind="file" :filename="file" :size="32" />
</template>

Devise

kind="currency" choisit son symbole d'après les paramètres régionaux : la région donne la devise et Intl.NumberFormat son symbole, dessiné comme R$, l'euro, le yen (aussi pour le yuan), la livre, le dollar (aussi pour les pesos et les autres dollars) ou le symbole monétaire générique. Passez currency="EUR" pour choisir vous-même la devise. Sans paramètres régionaux, l'icône utilise la langue du document, puis celle du navigateur.

<script>
  import { SmartIcon } from 'glyphfox/svelte';
  let { locale } = $props();
</script>

<SmartIcon kind="currency" {locale} title="auto" />
<SmartIcon kind="currency" currency="JPY" />

De droite à gauche

Les icônes directionnelles (flèches, chevrons, annuler et rétablir, répondre, envoyer, connexion et déconnexion, listes, retrait) se mettent désormais en miroir d'elles-mêmes dans les mises en page de droite à gauche, dans tous les paquets : elles portent la classe gf-rtl et une règle qui les retourne sous dir="rtl". Avec une prop locale ou dir, la décision suit ces paramètres régionaux plutôt que la page : un widget en arabe dans une page en anglais pointe donc toujours dans le bon sens. mirrorRtl={false} désactive ce comportement, et registerDirectional(['my-arrow']) ajoute vos propres icônes. Les commandes multimédias comme lecture et avance rapide ne sont jamais mises en miroir.

import { ChevronRightIcon, SmartIcon } from 'glyphfox/react';

// Follows the page: points left inside dir="rtl".
<ChevronRightIcon />

// Follows a locale, whatever the page direction.
<SmartIcon name="chevron-right" locale="ar" />

Plus de contraste

Quand le lecteur demande plus de contraste (prefers-contrast: more), les icônes intelligentes tracent leurs lignes avec un demi-cran d'épaisseur en plus, mettent leurs libellés plus en gras et rehaussent les parties éteintes. La règle voyage dans le SVG : elle fonctionne donc aussi dans le balisage rendu côté serveur et dans les fichiers exportés. contrast="more" applique ce renfort en permanence et contrast="off" jamais.

StatusIcon

Une icône pour les quatre états d'une tâche : idle, loading, success et error. Chaque changement passe par le moteur de morphing de glyphfox (le cercle s'ouvre en spinner, le spinner se referme autour de la coche), et loading tourne une fois le morphing terminé. duration règle la durée du morphing, spinDuration celle de la rotation, et avec la réduction des animations l'icône passe directement au nouvel état.

import { StatusIcon } from 'glyphfox/react';

export function SaveButton({ state, onSave }) {
  return (
    <button onClick={onSave} aria-busy={state === 'loading'}>
      <StatusIcon state={state} title="auto" /> Save
    </button>
  );
}

Sans JavaScript, statusSvg('success', { from: 'loading' }) renvoie un SVG qui se transforme au chargement, en CSS uniquement.

IconGroup

Un groupe joue un préréglage d'état animé sur toutes ses icônes, avec un stagger entre elles. Déclencheurs : mount, hover (tout le groupe), click (rejoue à chaque clic) et state (joue tant que active). from="end" ou "center" change l'ordre de la vague. Les enfants qui définissent leur propre préréglage ou leur propre délai le conservent ; icons rend pour vous des noms, des données d'icône ou des éléments intelligents.

Survolez la rangée ci-dessous.

import { IconGroup, HomeIcon, SearchIcon, BellIcon } from 'glyphfox/react';

<IconGroup animate="pop" stagger={70}>
  <HomeIcon />
  <SearchIcon />
  <BellIcon animate="shake" />
</IconGroup>

<IconGroup icons={['home', 'search', { kind: 'battery', value: 0.8 }]} animate="draw" trigger="hover" />

Tous les paquets

Les trois mêmes briques sont livrées dans React, Vue et Svelte (SmartIcon, StatusIcon, IconGroup), sous forme de custom elements et de simples fonctions dans le core.

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<glyph-fox-smart kind="battery" value="0.4" charging></glyph-fox-smart>
<glyph-fox-smart kind="currency" locale="pt-BR"></glyph-fox-smart>
<glyph-fox-smart name="arrow-right" locale="he"></glyph-fox-smart>
<glyph-fox-status state="loading"></glyph-fox-status>
<glyph-fox-group animate="pop" stagger="80" trigger="hover">
  <glyph-fox name="home"></glyph-fox>
  <glyph-fox name="search"></glyph-fox>
</glyph-fox-group>

import { smartSvg, statusSvg, groupSvg, currencyInfo, isRtlLocale } from 'glyphfox';

smartSvg('battery', { value: 0.42, size: 32, title: 'auto' });
smartSvg('calendar', { date: '2026-10-23', locale: 'pt-BR' });
smartSvg('badge', { count: 12, icon: 'mail' });
smartSvg('arrow-right', { locale: 'ar' });          // any icon, mirrored
statusSvg('success', { from: 'loading' });          // CSS only morph
groupSvg(['home', 'file', { kind: 'wifi', value: 1 }], { animate: 'pop', stagger: 80 });
currencyInfo({ locale: 'ja-JP' });                  // { currency: 'JPY', symbol: '￥', glyph: 'yen', ... }
isRtlLocale('fa-IR');                               // true

smartIcon(kind, options) renvoie de simples données d'icône : une icône intelligente peut donc aussi alimenter renderIcon, votre propre moteur de rendu ou le moteur de morphing. Dans glyphfox/core, les mêmes fonctions résolvent les noms à partir des icônes que vous enregistrez.

Options

En plus de toutes les props communes. Les attributs s'écrivent en kebab-case (badge-color).