Personalizzazione

Colore, badge, dimensione e animazione delle icone si impostano con le prop e le proprietà personalizzate CSS.

Colore

Tutti i colori di un'icona sono calcolati da un solo colore principale. Per impostazione predefinita il colore principale è currentColor, quindi puoi cambiarlo impostando la proprietà CSS color sull'icona o su un suo antenato:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

I colori sono calcolati con color-mix() di CSS, quindi una transizione su color sfuma insieme tutte le sfumature:

css

.kubai-icon { transition: color .3s ease; }

Badge

Un'icona con badge, come folder-plus o user-check, ha un badge in un angolo. Per impostazione predefinita il badge è un disco scuro con un glifo bianco. badgeColor cambia il colore del disco. badgeColor="semantic" sceglie un colore adatto a ogni badge: verde per aggiungere e completato, rosso per rimuovere e annullare, ambra per gli avvisi.

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

Proprietà personalizzate CSS

Impostale su un'icona o su un suo antenato per sovrascrivere singole tonalità. I segni sono le linee e i simboli disegnati su un'icona.

Proprietà	Controlli
`--ki-c`	Colore di base per sfumature e segni chiari. Predefinito: `currentColor`.
`--ki-e`	Colore di base per contorni e segni scuri. Predefinito: `--ki-c`.
`--ki-w`	Colore dei segni che sono bianchi per impostazione predefinita.
`--ki-b`	Colore del disco del badge. Predefinito: grigio scuro neutro.
`--ki-l`	Quanto i grandi riempimenti pieni sfumano verso il bianco in alto, da 0% a 100%.

variant="soft" imposta tutte queste variabili tranne --ki-b.

Impostare la variante per un'intera pagina

Una variante viene ereditata, come color. Impostala su qualsiasi elemento e tutte le icone al suo interno la seguono, a meno che abbiano una variant propria. Vince sempre l'impostazione più vicina: prima la prop dell'icona, poi l'elemento più vicino, poi il valore predefinito color.

tsx

import { Folder, VARIANTS } from "kubai-icons-react";

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

Lo stesso oggetto funziona in Vue con :style. Senza framework, chiama setVariant:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

I file SVG statici hanno i colori scritti al loro interno, quindi scegli la variante dalla cartella: svg/ o svg-soft/.

Dimensione

Imposta la dimensione con la prop size. A 24px e meno usa le icone di base invece di quelle con badge, perché il badge ha poco spazio. Il canvas è descritto in Linguaggio di design.

Animazione

Ogni animazione dura 460ms con cubic-bezier(.22, 1, .36, 1) e parte dalla posizione attuale dell'icona, quindi può invertirsi a metà. Quando è attivo prefers-reduced-motion, le icone passano direttamente alla posa finale senza animazione.