Personnalisation

La couleur, les badges, la taille et l’animation des icônes se règlent avec des props et des propriétés personnalisées CSS.

Couleur

Toutes les couleurs d’une icône sont calculées à partir d’une seule couleur d’accent. Par défaut, l’accent est currentColor : vous pouvez donc le changer en définissant la propriété CSS color sur l’icône ou sur n’importe quel ancêtre :

html

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

Les couleurs sont calculées avec color-mix() en CSS : une transition sur color fait donc fondre tous les dégradés en fondu enchaîné :

css

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

Badges

Une icône à badge, comme folder-plus ou user-check, porte un badge dans un coin. Par défaut, le badge est un disque sombre avec un glyphe blanc. badgeColor change la couleur du disque. badgeColor="semantic" choisit une couleur adaptée à chaque badge : vert pour ajouter et terminer, rouge pour supprimer et annuler, ambre pour les avertissements.

tsx

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

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

Propriétés personnalisées CSS

Définissez-les sur une icône ou sur n’importe quel ancêtre pour remplacer des teintes individuelles. Les tracés sont les traits et les symboles dessinés sur une icône.

Propriété	Commandes
`--ki-c`	Couleur de base pour les dégradés et les tracés clairs. Par défaut : `currentColor`.
`--ki-e`	Couleur de base pour les contours et les tracés sombres. Par défaut : `--ki-c`.
`--ki-w`	Couleur des tracés qui sont blancs par défaut.
`--ki-b`	Couleur du disque du badge. Par défaut : gris foncé neutre.
`--ki-l`	Jusqu’où les grands aplats se fondent en blanc vers le haut, de 0 % à 100 %.

variant="soft" définit toutes ces propriétés, sauf --ki-b.

Définir la variante pour toute une page

Une variante est héritée, comme color. Définissez-la sur n’importe quel élément : toutes les icônes qu’il contient la suivent, sauf si elles ont leur propre variant. Le réglage le plus proche l’emporte : d’abord la prop de l’icône, puis l’élément le plus proche, puis la color par défaut.

tsx

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

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

Le même objet fonctionne dans Vue avec :style. Sans framework, appelez setVariant :

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

setVariant(document.documentElement, "soft");

Les fichiers SVG statiques ont leurs couleurs écrites dans le fichier : choisissez la variante par le dossier, svg/ ou svg-soft/.

Taille

Définissez la taille avec la prop size. À 24 px et moins, utilisez les icônes de base plutôt que les icônes à badge, car le badge y a peu de place. Le canevas est décrit dans Langage de design.

Animation

Chaque animation dure 460 ms sur cubic-bezier(.22, 1, .36, 1) et part de la position actuelle de l’icône, ce qui permet de l’inverser en cours de route. Quand prefers-reduced-motion est activé, les icônes passent directement à la pose finale sans animation.