React

kubai-icons-react stellt jedes Icon als React-Komponente bereit. Es setzt React 18 oder neuer voraus.

Installation

bash

npm install kubai-icons-react

Verwendung

Importieren Sie ein Icon nach Name und rendern Sie es als Komponente:

tsx

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

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

Props

Prop	Standard	Beschreibung
`size`	24	Breite und Höhe in Pixeln.
`color`	currentColor	Die Akzentfarbe, aus der alle Verläufe, Konturen und Zeichen abgeleitet werden. Siehe Anpassung.
`variant`	geerbt, sonst „color“	`"soft"` verwendet hellere Flächen und dunklere Konturen und zeichnet weiße Zeichen in einem dunklen Ton.
`badgeColor`	Dunkelgrau	Farbe der Badge-Scheibe: eine beliebige CSS-Farbe oder `"semantic"` für eine zum jeweiligen Badge passende Farbe, etwa Grün für Hinzufügen, Rot für Entfernen und Bernstein für Warnung.
`trigger`	"hover"	`"hover"` spielt die Bewegung ab, wenn das Icon überfahren wird oder den Tastaturfokus erhält. `"parent"` tut dies für das nächste übergeordnete Element mit `data-kubai-trigger`, oder für das direkte übergeordnete Element, wenn es keines gibt. `"none"` fügt keine Listener hinzu, sodass nur die Prop `hover` die Bewegung abspielt.
`hover`	Keine	`true` spielt die Bewegung ab und `false` kehrt sie um. Kombinieren Sie die Prop mit `trigger="none"` für volle Kontrolle.
`active`, `defaultActive`, `onActiveChange`	Keine	Ein-/Aus-Zustand für Umschalt-Icons, die beim Klicken oder Tippen zwischen zwei Zuständen wechseln. `Bookmark` ist ein Beispiel.
`title`	Keine	Zugänglicher Name. Ohne ihn ist das Icon `aria-hidden`. Siehe Barrierefreiheit.

Weitere SVG-Props wie className, style, Event-Handler und ref werden an das <svg> durchgereicht.

Von einem übergeordneten Element auslösen

Damit die Bewegung abgespielt wird, wenn eine ganze Schaltfläche überfahren wird oder den Tastaturfokus erhält, fügen Sie der Schaltfläche data-kubai-trigger und dem Icon trigger="parent" hinzu:

tsx

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

Icons nach Name

Wenn der Icon-Name erst zur Laufzeit feststeht, etwa als Wert aus einer API, verwenden Sie DynamicIcon. Jedes Icon bleibt ein eigener Chunk, sodass das Bundle nicht das gesamte Set enthält.

tsx

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

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

Server-Rendering

Icons funktionieren in Next.js Server Components und Client Components ohne Konfiguration. Das Markup wird auf dem Server gerendert, und die Bewegung wird bei der Hydration ergänzt. DynamicIcon ist die Ausnahme: Es rendert auf dem Server einen leeren Platzhalter und lädt das Icon im Browser.

Direkte Importe

Um das Laden des Paketindex in einem Dev-Server zu vermeiden, importieren Sie ein Icon aus seiner eigenen Datei. Siehe Performance.

tsx

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