Sistema icone e icone

1) Il ruolo delle icone nel prodotto

Le icone sono un portatore compatto di significato e condizione. Accelerano le scansioni, aiutano a risparmiare spazio e migliorano la riconoscibilità dei pattern. Nelle interfacce alimentari, l'icona completa il testo e il colore anziché sostituirli.

1. Significato> Stile: ogni icona deve avere uno scenario di applicazione chiaro.

2. Consistenza: una griglia, un tratto, gli angoli, il ritmo di riempimento.

3. Disponibilità: l'icona non è l'unico segnale; c'è sempre una firma/tooltip/aria.

4. Prestazioni: una pipline SVG, sprite e token colori/dimensioni.

2) Griglia e linee chiave

Artboard base: 16 x 16, 20 x 20, 24 x 24 (principale), 32 x 32.
Linea chiave (keyline) è un cerchio/quadrato inserito con un rientro di 1-2 px per l'equilibrio ottico.
Passo pixel - Disegnare in coordinate intere; stroke multiplo 0. 5 px (solitamente 1. 5 px per 24 x 24).

• Le diagonali più spesse sono più sottili - aggiungete 0. 25 px a stroke in posti problematici.
• I vertici degli angoli affilati vengono leggermente allungati all'interno di keyline di 1 px, così da non «remare».
• Tazze e punti richiedono spesso + 1 px al diametro per una massa visiva uguale.

Zone click: area interattiva 40 x 40 px (mobile), 32 x 32 px (desktop); l'icona è centrata.

3) Stile set

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: «round» per l'amichevole o «miter» per lo stile tecnico (registrato nella haydline).
• Gli angoli del raggio della geometria sono 2-3 px (su 24 x 24).

Riempimento (filled) - Per le aree dense e le icone di stato.
Duotone - Consentito per gli stati vuoti illustrativi, ma non per i segnali UI critici.

• Outline è uno stato di base.
• Philled è un asset/selezione.
• Two-tone - decorativo/nella guida.

4) Colore e contrasto (WCAG)

Modalità base - Monocromo attraverso «currentColor»: l'icona eredita il colore del testo/contesto.

• `icon. error'sfondo 3:1, firmato con testo (non solo colore).
• `icon. on-surface 'sfondo 3:1; per le piccole dimensioni puntare a 4. 5:1.
• Sulle tinte colorate, usate i colori «on-» (controllo automatico del contrasto dal sistema di colore).

5) Stati e interazioni

Default/Hover/Active/Disabled/Focus: differenza non solo di colore - cambia opacità/riempimento/spessore/sfondo-pillola, aggiungiamo focus ring.
Badges (contatori) - Contrasta il numero 4. 5:1 alla piastra; la dimensione del numero è 10-11 px.
Icone Toggle (preferiti, like) - Cambia il riempimento e/o il punto interno, non solo il colore.

6) Icona + testo

Le icone non sostituiscono le etichette nelle azioni chiave. Coppia minima: icone + testo corto (o tooltip à aria-label "). Negli elenchi e nelle tabelle, l'icona viene allineata alla cappa del testo e alla linea di base.

7) Disponibilità (A11y)

Per le icone decorative:' role =» img» aria-hidden =» true» o rimuovere dal flusso di disponibilità.
Per i significati: «<svg role =» img «aria-labelledby =» id «>» + «<title id =» id «> Descrizione </title>» o «aria-label».
L'icona non deve essere l'unico supporto di stato: aggiungi testo/suggerimento/pattern iconografico (forma, tratto).
Le dimensioni del testo e il contrasto della firma corrispondono a WCAG (normale) 4. 5:1).

8) Pipline SVG e prestazioni

Perché SVG: nitidezza vettoriale, stile CSS, peso ridotto e ottimizzazione.

• Memorizza i file master in un Farma, esporta in un SVG con le opzioni «group», «fill-rule» predefinite, «viewBox» e «width/height» (ridefinito in CSS).
• Sposta su SVGO (profilo di progetto) - Rimuove i metadati, riduce le coordinate e unisce i percorsi.
• Abbandono caratteri iconici - Problemi di accessibilità e rendering.

1. Sprite SVG:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

ripetizioni a basso costo - non si può facilmente cambiare «stroke-width» in alcune pipline.
2. Componente inline-SVG (React) - Flessibilità di stili e props, tree-shaking.
3. External' <img> 'è solo decorativo/illustrativo.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) API del componente (esempio React)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• Per impostazione predefinita, "size =" 1em "è stroke = 1. 5`.
• Se "decorative" aggiungiamo "aria-hidden =" true ".