Iconos que muestran datos, se adaptan al lector e informan del estado

Iconos de datos

Cada icono de datos se dibuja en la misma cuadrícula de 24, con el mismo trazo, los mismos remates y el mismo margen que el resto del conjunto, así que las props size, color, weight, corners, variant, animate y title funcionan como siempre. El value va de 0 a 1. Un valor mayor que 1 sin max se interpreta como porcentaje, y min con max mapean valores reales, como una temperatura.

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

Cada icono lleva clases para su estado (gf-low, gf-full, gf-charging, gf-muted, gf-hot, gf-cold), y las barras y los arcos apagados llevan gf-off, para que una hoja de estilos pueda colorearlos. title="auto" da al icono un nombre accesible que describe los datos, como "Battery 64%", con los números formateados según la configuración regional.

Calendario y reloj

El calendario muestra el día de hoy por defecto, o la date que le pases (un Date, un timestamp o "2026-10-23"), con los dígitos del locale. El reloj muestra la hora actual, o un time dado ("09:30", "18:45:10" o un Date); seconds añade el segundero. Con tick, el reloj y el calendario siguen la hora real y se actualizan una vez por segundo, por minuto o a medianoche.

<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>

Archivos e insignias

El icono de archivo muestra su extensión (hasta cuatro letras) a partir de ext o de un filename. La insignia pone un contador de notificaciones sobre la campana, o sobre cualquier icono indicado en icon, con el mismo hueco recortado que usan los modificadores. Los contadores por encima de max (99) se muestran como "99+", 0 oculta la burbuja y dot muestra un punto. badgeColor colorea la burbuja; el número se recorta en ella, así que se lee sobre cualquier fondo.

<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>

Moneda

kind="currency" elige su símbolo según la configuración regional: la región determina la moneda e Intl.NumberFormat da su símbolo, que se dibuja como R$, el euro, el yen (también para el yuan), la libra, el dólar (también para pesos y otros dólares) o el signo genérico de moneda. Pasa currency="EUR" para elegir la moneda tú mismo. Sin configuración regional, el icono usa el idioma del documento y, después, el del navegador.

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

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

De derecha a izquierda

Los iconos direccionales (flechas, chevrons, deshacer y rehacer, responder, enviar, iniciar y cerrar sesión, listas, sangría) ahora se espejan solos en layouts de derecha a izquierda, en todos los paquetes: llevan la clase gf-rtl y una regla que los voltea bajo dir="rtl". Con una prop locale o dir, la decisión sigue esa configuración regional en lugar de la página, así que un widget en árabe dentro de una página en inglés sigue apuntando hacia el lado correcto. mirrorRtl={false} lo desactiva, y registerDirectional(['my-arrow']) añade tus propios iconos. Los controles multimedia como reproducir y avance rápido nunca se espejan.

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" />

Más contraste

Cuando el lector pide más contraste (prefers-contrast: more), los iconos inteligentes dibujan sus líneas medio paso de grosor más gruesas, ponen sus etiquetas más en negrita y realzan las partes apagadas. La regla viaja dentro del SVG, así que también funciona en el markup renderizado en el servidor y en los archivos exportados. contrast="more" aplica el refuerzo siempre y contrast="off" nunca.

StatusIcon

Un icono para los cuatro estados de una tarea: idle, loading, success y error. Cada cambio hace morph con el motor de morph de glyphfox (el círculo se abre en el spinner, el spinner se cierra alrededor del check), y loading gira cuando el morph ha terminado. duration fija la duración del morph, spinDuration la del giro, y con movimiento reducido salta directamente al nuevo estado.

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

Sin JavaScript, statusSvg('success', { from: 'loading' }) devuelve un SVG que hace morph al cargar, solo con CSS.

IconGroup

Un grupo reproduce una animación de estado vivo en todos sus iconos, con un stagger entre ellos. Disparadores: mount, hover (todo el grupo), click (se repite en cada clic) y state (se reproduce mientras active). from="end" o "center" cambia el orden de la ola. Los hijos que definen su propia animación o su propio retardo los conservan; icons renderiza nombres, datos de icono o elementos inteligentes por ti.

Pasa el cursor sobre la fila de abajo.

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" />

Todos los paquetes

Las mismas tres piezas se incluyen en React, Vue y Svelte (SmartIcon, StatusIcon, IconGroup), como custom elements y como funciones simples en el 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) devuelve datos de icono simples, así que un icono inteligente también puede alimentar a renderIcon, a un renderizador propio o al motor de morph. En glyphfox/core, las mismas funciones resuelven los nombres a partir de los iconos que registres.

Opciones

Además de todas las props compartidas. Los atributos usan kebab-case (badge-color).