Ícones que mostram dados, acompanham o leitor e informam o status

Ícones de dados

Todo ícone de dados é desenhado na mesma grade de 24, com o mesmo traço, as mesmas pontas e a mesma margem do resto do conjunto, então as props size, color, weight, corners, variant, animate e title funcionam como sempre. O value vai de 0 a 1. Um valor acima de 1 sem max é lido como porcentagem, e min com max mapeiam valores reais, como uma 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 ícone leva classes para o seu estado (gf-low, gf-full, gf-charging, gf-muted, gf-hot, gf-cold), e barras e arcos apagados levam gf-off, para que uma folha de estilo possa colori-los. title="auto" dá ao ícone um nome acessível que descreve os dados, como "Battery 64%", com os números formatados para a localidade.

Calendário e relógio

O calendário mostra o dia de hoje por padrão, ou a date que você passar (um Date, um timestamp ou "2026-10-23"), com os dígitos do locale. O relógio mostra a hora atual, ou um time informado ("09:30", "18:45:10" ou um Date); seconds adiciona o ponteiro dos segundos. Com tick, o relógio e o calendário acompanham a hora real, atualizando uma vez por segundo, por minuto ou à meia-noite.

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

Arquivos e selos

O ícone de arquivo mostra a extensão (até quatro letras) a partir de ext ou de um filename. O selo coloca uma contagem de notificações no sino, ou em qualquer ícone passado em icon, com o mesmo recorte que os modificadores usam. Contagens acima de max (99) aparecem como "99+", 0 esconde a bolha e dot mostra um ponto. badgeColor colore a bolha; o número é recortado dela, então fica legível em qualquer fundo.

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

Moeda

kind="currency" escolhe o símbolo pela localidade: a região define a moeda e o Intl.NumberFormat fornece o símbolo, que é desenhado como R$, euro, iene (também para o yuan), libra, dólar (também para pesos e outros dólares) ou o sinal genérico de moeda. Passe currency="EUR" para escolher a moeda você mesmo. Sem localidade, o ícone usa o idioma do documento e, depois, o idioma do navegador.

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

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

Da direita para a esquerda

Ícones direcionais (setas, chevrons, desfazer e refazer, responder, enviar, entrar e sair, listas, recuo) agora se espelham sozinhos em layouts da direita para a esquerda, em todos os pacotes: eles levam a classe gf-rtl e uma regra que os inverte sob dir="rtl". Com uma prop locale ou dir, a decisão segue essa localidade em vez da página, então um widget em árabe numa página em inglês continua apontando para o lado certo. mirrorRtl={false} desliga isso, e registerDirectional(['my-arrow']) adiciona os seus próprios ícones. Controles de mídia como play e avançar nunca se espelham.

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

Mais contraste

Quando o leitor pede mais contraste (prefers-contrast: more), os ícones inteligentes desenham as linhas meio passo de peso mais grossas, deixam os rótulos mais em negrito e realçam as partes apagadas. A regra vai dentro do SVG, então também funciona em markup renderizado no servidor e em arquivos exportados. contrast="more" aplica o reforço sempre e contrast="off" nunca aplica.

StatusIcon

Um ícone para os quatro estados de uma tarefa: idle, loading, success e error. Cada mudança faz morph com o motor de morph do glyphfox (o círculo se abre no spinner, o spinner se fecha em volta do check), e loading gira depois que o morph termina. duration define a duração do morph, spinDuration a do giro, e com movimento reduzido o ícone salta direto para o novo 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>
  );
}

Sem JavaScript, statusSvg('success', { from: 'loading' }) devolve um SVG que faz morph ao carregar, só com CSS.

IconGroup

Um grupo toca uma animação de estado vivo em todos os seus ícones, com um stagger entre eles. Gatilhos: mount, hover (o grupo inteiro), click (repete a cada clique) e state (toca enquanto active). from="end" ou "center" muda a ordem da onda. Filhos que definem a própria animação ou o próprio atraso mantêm os seus; icons renderiza nomes, dados de ícone ou itens inteligentes para você.

Passe o mouse sobre a linha abaixo.

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

As mesmas três peças vêm em React, Vue e Svelte (SmartIcon, StatusIcon, IconGroup), como custom elements e como funções simples no 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) devolve dados de ícone simples, então um ícone inteligente também pode alimentar o renderIcon, um renderizador próprio ou o motor de morph. Em glyphfox/core, as mesmas funções resolvem os nomes a partir dos ícones que você registrar.

Opções

Além de todas as props compartilhadas. Os atributos usam kebab-case (badge-color).