React

kubai-icons-react fournit chaque icône sous forme de composant React. Il nécessite React 18 ou version ultérieure.

Installation

bash

npm install kubai-icons-react

Utilisation

Importez une icône par son nom et affichez-la comme composant :

tsx

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

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

Props

Prop	Par défaut	Description
`size`	24	Largeur et hauteur en pixels.
`color`	currentColor	La couleur d’accent dont dérivent tous les dégradés, contours et tracés. Voir Personnalisation.
`variant`	hérité, sinon "color"	`"soft"` utilise des remplissages plus clairs et des contours plus sombres, et dessine les tracés blancs dans une teinte sombre.
`badgeColor`	gris foncé	Couleur du disque du badge : n’importe quelle couleur CSS, ou `"semantic"` pour une couleur adaptée à chaque badge, comme le vert pour ajouter, le rouge pour supprimer et l’ambre pour avertir.
`trigger`	"hover"	`"hover"` lance l’animation quand l’icône est survolée ou reçoit le focus clavier. `"parent"` fait de même pour l’ancêtre le plus proche portant `data-kubai-trigger`, ou pour le parent direct s’il n’y en a pas. `"none"` n’ajoute aucun écouteur : seule la prop `hover` lance l’animation.
`hover`	Aucun	`true` lance l’animation et `false` l’inverse. Combinez-le avec `trigger="none"` pour un contrôle total.
`active`, `defaultActive`, `onActiveChange`	Aucun	État activé ou désactivé des icônes à bascule, qui alternent entre deux états au clic ou au toucher. `Bookmark` en est un exemple.
`title`	Aucun	Nom accessible. Sans lui, l’icône est `aria-hidden`. Voir Accessibilité.

Les autres props SVG, comme className, style, les gestionnaires d’événements et ref, sont transmises au <svg>.

Déclencher depuis un parent

Pour lancer l’animation quand tout un bouton est survolé ou reçoit le focus clavier, ajoutez data-kubai-trigger au bouton et trigger="parent" à l’icône :

tsx

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

Icônes par nom

Si le nom de l’icône n’est connu qu’à l’exécution, par exemple une valeur venant d’une API, utilisez DynamicIcon. Chaque icône reste un chunk distinct : le bundle n’inclut donc pas tout l’ensemble.

tsx

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

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

Rendu serveur

Les icônes fonctionnent sans configuration dans les Server Components et les Client Components de Next.js. Le balisage est rendu côté serveur, et l’animation est ajoutée à l’hydratation. DynamicIcon fait exception : il rend un espace réservé vide côté serveur et charge l’icône dans le navigateur.

Imports profonds

Pour éviter de charger l’index du paquet dans un serveur de développement, importez l’icône depuis son propre fichier. Voir Performances.

tsx

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