JavaScript

kubai-icons crea icone da JavaScript puro e fornisce il web component <kubai-icon>.

Installazione

bash

npm install kubai-icons

Creare un elemento

createIcon restituisce un elemento <svg> che puoi aggiungere alla pagina:

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

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

trigger: "parent" funziona solo se aggiungi l'icona alla pagina in modo sincrono subito dopo averla creata, come in questo esempio. Per aggiungere un'icona più tardi, vedi Rendering sul server e collega l'evento da te.

Sostituire i segnaposto

Aggiungi un elemento con data-kubai dove vuoi un'icona, poi chiama replaceIcons per sostituire ogni elemento con il suo SVG. Elenca ogni icona che usi nell'opzione icons. Questo esempio presuppone un bundler:

html

<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>

Usare il web component

Aggiungi un tag script per caricare il componente da una CDN. Scarica il file di ogni icona la prima volta che viene usata.

html

<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>

Rendering sul server

toSvg restituisce l'icona come stringa HTML senza animazione:

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

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

Per aggiungere l'animazione nel browser, trova l'elemento <svg> renderizzato, passalo a animate e collega il risultato all'elemento che deve avviare l'animazione:

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

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