JavaScript

Installation

npm install kubai-icons

Element erstellen

createIcon gibt ein <svg>-Element zurück, das Sie der Seite hinzufügen können:

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

document.querySelector("#toolbar").append(
  createIcon(Folder, { size: 24 }),
  createIcon(MailPlus, { color: "#EC4899", trigger: "parent" })
);

trigger: "parent" funktioniert nur, wenn Sie das Icon unmittelbar nach dem Erstellen synchron zur Seite hinzufügen, wie in diesem Beispiel. Wenn Sie ein Icon später hinzufügen, lesen Sie Auf dem Server rendern und binden Sie es selbst an.

Platzhalter ersetzen

Fügen Sie überall dort ein Element mit data-kubai ein, wo ein Icon erscheinen soll, und rufen Sie dann replaceIcons auf, um jedes Element durch sein SVG zu ersetzen. Listen Sie jedes verwendete Icon in der Option icons auf. Dieses Beispiel setzt einen Bundler voraus:

<i data-kubai="folder" data-size="32"></i>
<i data-kubai="calendar-check" data-color="#22C55E"></i>

<script type="module">
  import { replaceIcons, Folder, CalendarCheck } from "kubai-icons";
  replaceIcons({ icons: { Folder, CalendarCheck } });
</script>

Die Web Component verwenden

Fügen Sie ein Script-Tag hinzu, um die Komponente von einem CDN zu laden. Sie lädt die Datei eines Icons beim ersten Gebrauch herunter.

<script type="module" src="https://cdn.jsdelivr.net/npm/kubai-icons@0/dist/cdn/element.js"></script>

<kubai-icon name="folder"></kubai-icon>
<kubai-icon name="bell-off" size="32" color="#F97316" variant="soft" label="Muted"></kubai-icon>

Auf dem Server rendern

toSvg gibt das Icon als HTML-String ohne Bewegung zurück:

import { toSvg, Folder } from "kubai-icons";

const html = toSvg(Folder, { size: 24, title: "Files" });

Um die Bewegung im Browser zu ergänzen, suchen Sie das gerenderte <svg>-Element, übergeben es an animate und verbinden das Ergebnis mit dem Element, das die Bewegung starten soll:

import { animate, bindTrigger, Folder } from "kubai-icons";

const svg = document.querySelector("#files svg");
bindTrigger(svg.parentElement, animate(svg, Folder), Folder);