Einführung

Kubai Icons ist eine Open-Source-Bibliothek aus SVG-Icons mit Ebenen und Hover-Bewegung. Diese Seite listet die Pakete auf und erklärt, wie Icons benannt und versioniert werden.

Jedes Icon bezieht alle seine Farbtöne aus einer Akzentfarbe. Beim Hover spielt es ab, was das Objekt tut: Ein Ordner öffnet sich, ein Umschlag wird entsiegelt. Jedes Icon ist ein eigenes ES-Modul, das das SVG-Markup seines Ruhezustands, der sogenannten Ruhepose, und seine Hover-Bewegung enthält.

Pakete

Paket	Einsatzbereich	Doku
`kubai-icons-react`	React 18+ und Next.js, einschließlich Server-Rendering	React-Paket
`kubai-icons-vue`	Vue 3.3+ und Nuxt	Vue-Paket
`kubai-icons`	Reines JavaScript und die Web Component `<kubai-icon>`	JavaScript-Paket
`kubai-icons-static`	SVG-Dateien für `<img>`-Tags, Designtools und Seiten ohne JavaScript	Paket für statisches SVG

Schnellstart

Dieses Beispiel verwendet React. Für andere Umgebungen lesen Sie die oben aufgeführten Pakete. Installieren Sie das Paket:

bash

npm install kubai-icons-react

Importieren Sie dann die benötigten Icons:

tsx

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

export default function App() {
  return (
    <>
      <Folder />                                 {/* 24px, in the text color */}
      <MailPlus size={32} color="#EC4899" />     {/* any CSS color */}
    </>
  );
}

Icon-Namen

Icon-Namen sind englisch und in kebab-case: folder, cloud-rain, arrow-up-right. Die Pakete für JavaScript, React und Vue exportieren sie in PascalCase, etwa CloudRain. React und Vue exportieren zusätzlich CloudRainIcon. Statische Dateien behalten den Namen in kebab-case. Der Icon-Browser durchsucht Namen und Tags.

Viele Basis-Icons gibt es auch als Icons mit Badge, etwa folder-plus, user-check und calendar-clock. Icons für Dinge, die sich ausschalten lassen, gibt es auch als durchgestrichene Icons, etwa bell-off.

Versionierung

Die Pakete folgen Semantic Versioning und werden gemeinsam veröffentlicht. Ein Icon umzubenennen oder zu entfernen ist eine inkompatible Änderung, ein Icon neu zu zeichnen nicht. Release Notes erscheinen auf GitHub.