React

kubai-icons-react fornisce ogni icona come componente React. Richiede React 18 o successivo.

Installazione

bash

npm install kubai-icons-react

Utilizzo

Importa un'icona per nome e renderizzala come componente:

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Props

Prop	Predefinito	Descrizione
`size`	24	Larghezza e altezza in pixel.
`color`	currentColor	Il colore principale da cui derivano tutte le sfumature, i contorni e i segni. Vedi Personalizzazione.
`variant`	ereditato, altrimenti "color"	`"soft"` usa riempimenti più chiari e contorni più scuri, e disegna i segni bianchi in una tonalità scura.
`badgeColor`	grigio scuro	Colore del disco del badge: qualsiasi colore CSS, oppure `"semantic"` per un colore adatto a ogni badge, come verde per aggiungere, rosso per rimuovere e ambra per gli avvisi.
`trigger`	"hover"	`"hover"` riproduce l'animazione quando si passa il mouse sull'icona o quando riceve il focus da tastiera. `"parent"` fa lo stesso per l'antenato più vicino con `data-kubai-trigger`, o per il genitore diretto se non ce n'è. `"none"` non aggiunge listener, quindi l'animazione parte solo con la prop `hover`.
`hover`	Nessuno	`true` riproduce l'animazione e `false` la inverte. Combinalo con `trigger="none"` per il controllo completo.
`active`, `defaultActive`, `onActiveChange`	Nessuno	Stato acceso/spento per le icone a interruttore, che passano tra due stati con un clic o un tocco. `Bookmark` è un esempio.
`title`	Nessuno	Nome accessibile. Senza di esso, l'icona ha `aria-hidden`. Vedi Accessibilità.

Le altre prop SVG, come className, style, gli event handler e ref, vengono passate all'elemento <svg>.

Trigger da un elemento genitore

Per riprodurre l'animazione quando si passa il mouse su un intero pulsante o questo riceve il focus da tastiera, aggiungi data-kubai-trigger al pulsante e trigger="parent" all'icona:

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

Icone per nome

Se il nome dell'icona è noto solo a runtime, per esempio un valore proveniente da un'API, usa DynamicIcon. Ogni icona resta un chunk separato, quindi il bundle non include l'intero set.

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

Rendering sul server

Le icone funzionano nei Server Component e nei Client Component di Next.js senza configurazione. Il markup viene renderizzato sul server e l'animazione viene aggiunta all'idratazione. DynamicIcon è l'eccezione: sul server renderizza un segnaposto vuoto e carica l'icona nel browser.

Import diretti

Per evitare di caricare l'indice del pacchetto in un server di sviluppo, importa un'icona dal proprio file. Vedi Prestazioni.

tsx

import Folder from "kubai-icons-react/icons/folder";