Anpassung

Farbe, Badges, Größe und Bewegung der Icons werden über Props und benutzerdefinierte CSS-Eigenschaften festgelegt.

Farbe

Alle Farben eines Icons werden aus einer Akzentfarbe berechnet. Standardmäßig ist der Akzent currentColor, sodass Sie ihn ändern können, indem Sie die CSS-Eigenschaft color am Icon oder an einem übergeordneten Element setzen:

html

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

Die Farben werden mit dem CSS-Befehl color-mix() berechnet, daher blendet eine Transition auf color alle Verläufe über:

css

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

Badges

Ein Icon mit Badge, etwa folder-plus oder user-check, trägt in einer Ecke ein Badge. Standardmäßig ist das Badge eine dunkle Scheibe mit einem weißen Symbol. badgeColor ändert die Farbe der Scheibe. badgeColor="semantic" wählt für jedes Badge eine passende Farbe: Grün für Hinzufügen und Erledigt, Rot für Entfernen und Abbrechen, Bernstein für Warnungen.

tsx

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

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

Benutzerdefinierte CSS-Eigenschaften

Legen Sie diese Werte an einem Icon oder einem übergeordneten Element fest, um einzelne Töne zu überschreiben. Zeichen sind die Linien und Symbole, die auf ein Icon gezeichnet werden.

Eigenschaft	Steuerung
`--ki-c`	Basisfarbe für Verläufe und helle Zeichen. Standard: `currentColor`.
`--ki-e`	Basisfarbe für Konturen und dunkle Zeichen. Standard: `--ki-c`.
`--ki-w`	Farbe der Zeichen, die standardmäßig weiß sind.
`--ki-b`	Farbe der Badge-Scheibe. Standard: neutrales Dunkelgrau.
`--ki-l`	Wie stark große gefüllte Flächen zur Oberkante hin zu Weiß verblassen, von 0 % bis 100 %.

variant="soft" setzt alle diese Werte außer --ki-b.

Variante für eine ganze Seite festlegen

Eine Variante wird vererbt, ebenso wie color. Legen Sie sie an einem beliebigen Element fest, dann folgen ihr alle darin enthaltenen Icons, sofern sie keine eigene variant haben. Die nähere Einstellung gewinnt immer: zuerst die Prop des Icons, dann das nächstgelegene Element, dann der Standard von color.

tsx

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

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

Dasselbe Objekt funktioniert in Vue mit :style. Ohne Framework rufen Sie setVariant auf:

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

setVariant(document.documentElement, "soft");

Bei statischen SVG-Dateien sind die Farben fest eingetragen, daher wählen Sie die Variante über den Ordner: svg/ oder svg-soft/.

Größe

Legen Sie die Größe mit der Prop size fest. Verwenden Sie ab 24 px abwärts Basis-Icons statt Icons mit Badge, da ein Badge dort wenig Platz hat. Die Zeichenfläche ist unter Designsprache beschrieben.

Bewegung

Jede Bewegung dauert 460 ms mit cubic-bezier(.22, 1, .36, 1) und beginnt an der aktuellen Position des Icons, sodass sie auf halbem Weg umkehren kann. Ist prefers-reduced-motion gesetzt, springen Icons ohne Animation direkt in die Endpose.