Icons, die Daten zeigen, sich nach dem Leser richten und den Status melden

Daten-Icons

Jedes Daten-Icon wird auf demselben 24er-Raster gezeichnet, mit demselben Strich, denselben Linienenden und demselben Innenabstand wie der Rest des Sets, daher funktionieren die Props size, color, weight, corners, variant, animate und title wie gewohnt. value reicht von 0 bis 1. Ein Wert über 1 ohne max wird als Prozentwert gelesen, und min mit max bilden echte Werte ab, etwa eine Temperatur.

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

Jedes Icon trägt Klassen für seinen Zustand (gf-low, gf-full, gf-charging, gf-muted, gf-hot, gf-cold), und nicht leuchtende Balken und Bögen tragen gf-off, damit ein Stylesheet sie einfärben kann. title="auto" gibt dem Icon einen zugänglichen Namen, der die Daten beschreibt, etwa „Battery 64%“, mit Zahlen im Format der Locale.

Kalender und Uhr

Der Kalender zeigt standardmäßig den heutigen Tag oder das übergebene date (ein Date, einen Zeitstempel oder „2026-10-23“), mit den Ziffern der locale. Die Uhr zeigt die aktuelle Uhrzeit oder eine angegebene time („09:30“, „18:45:10“ oder ein Date); seconds fügt den Sekundenzeiger hinzu. Mit tick folgen Uhr und Kalender der echten Zeit und aktualisieren sich einmal pro Sekunde, pro Minute oder um Mitternacht.

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

Dateien und Badges

Das Datei-Icon zeigt seine Endung (bis zu vier Buchstaben) aus ext oder einem filename. Das Badge setzt eine Benachrichtigungszahl auf die Glocke oder auf ein beliebiges Icon, das als icon übergeben wird, mit derselben ausgesparten Lücke wie bei den Modifikatoren. Zahlen über max (99) erscheinen als „99+“, 0 blendet die Blase aus und dot zeigt einen Punkt. badgeColor färbt die Blase; die Zahl ist aus ihr ausgespart, daher bleibt sie auf jedem Hintergrund lesbar.

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

Währung

kind="currency" wählt sein Zeichen anhand der Locale: Die Region bestimmt die Währung und Intl.NumberFormat liefert ihr Symbol, das als R$, Euro, Yen (auch für den Yuan), Pfund, Dollar (auch für Pesos und andere Dollar) oder als allgemeines Währungszeichen gezeichnet wird. Übergib currency="EUR", um die Währung selbst festzulegen. Ohne Locale verwendet das Icon die Sprache des Dokuments und danach die des Browsers.

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

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

Rechts nach links

Richtungs-Icons (Pfeile, Chevrons, Rückgängig und Wiederholen, Antworten, Senden, An- und Abmelden, Listen, Einzug) spiegeln sich jetzt in Rechts-nach-links-Layouts von selbst, in jedem Paket: Sie tragen die Klasse gf-rtl und eine Regel, die sie unter dir="rtl" umdreht. Mit einer Prop locale oder dir richtet sich die Entscheidung nach dieser Locale statt nach der Seite, sodass ein arabisches Widget auf einer englischen Seite trotzdem in die richtige Richtung zeigt. mirrorRtl={false} schaltet das ab, und registerDirectional(['my-arrow']) fügt deine eigenen Icons hinzu. Mediensteuerungen wie Abspielen und Vorspulen werden nie gespiegelt.

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

Mehr Kontrast

Wenn der Leser mehr Kontrast wünscht (prefers-contrast: more), zeichnen intelligente Icons ihre Linien eine halbe Stärkestufe kräftiger, setzen ihre Beschriftungen fetter und heben die nicht leuchtenden Teile an. Die Regel steckt im SVG, daher funktioniert sie auch in serverseitig gerendertem Markup und in exportierten Dateien. contrast="more" wendet die Verstärkung immer an, contrast="off" nie.

StatusIcon

Ein Icon für die vier Zustände einer Aufgabe: idle, loading, success und error. Jeder Wechsel läuft über die Morph-Engine von glyphfox (der Kreis öffnet sich zum Spinner, der Spinner schließt sich um das Häkchen), und loading dreht sich, sobald das Morphing abgeschlossen ist. duration bestimmt die Dauer des Morphings, spinDuration die der Drehung, und bei reduzierter Bewegung springt das Icon direkt in den neuen Zustand.

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

Ohne JavaScript liefert statusSvg('success', { from: 'loading' }) ein SVG, das sich beim Laden allein mit CSS verwandelt.

IconGroup

Eine Gruppe spielt eine Animation der lebendigen Zustände über alle ihre Icons ab, mit einem stagger dazwischen. Auslöser: mount, hover (die ganze Gruppe), click (spielt bei jedem Klick erneut) und state (spielt, solange active gilt). from="end" oder "center" ändert die Reihenfolge der Welle. Kinder, die ihre eigene Animation oder Verzögerung festlegen, behalten sie; icons rendert Namen, Icon-Daten oder intelligente Elemente für dich.

Fahre mit der Maus über die Reihe darunter.

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

Alle Pakete

Dieselben drei Bausteine gibt es in React, Vue und Svelte (SmartIcon, StatusIcon, IconGroup), als Custom Elements und als einfache Funktionen im 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) liefert einfache Icon-Daten, daher kann ein intelligentes Icon auch renderIcon, einen eigenen Renderer oder die Morph-Engine speisen. In glyphfox/core lösen dieselben Funktionen Namen aus den Icons auf, die du registrierst.

Optionen

Zusätzlich zu allen gemeinsamen Props. Attribute verwenden kebab-case (badge-color).