JavaScript

kubai-icons crée des icônes à partir de JavaScript pur et fournit le web component <kubai-icon>.

Installation

bash

npm install kubai-icons

Créer un élément

createIcon renvoie un élément <svg> que vous pouvez ajouter à la page :

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

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

trigger: "parent" ne fonctionne que si vous ajoutez l’icône à la page de façon synchrone juste après l’avoir créée, comme dans cet exemple. Pour ajouter une icône plus tard, consultez Rendu côté serveur et liez-la vous-même.

Remplacer les espaces réservés

Ajoutez un élément avec data-kubai à l’endroit voulu pour chaque icône, puis appelez replaceIcons pour remplacer chaque élément par son SVG. Listez chaque icône utilisée dans l’option icons. Cet exemple suppose l’utilisation d’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>

Utiliser le web component

Ajoutez une balise script pour charger le composant depuis un CDN. Il télécharge le fichier de chaque icône à sa première utilisation.

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>

Rendu côté serveur

toSvg renvoie l’icône sous forme de chaîne HTML, sans animation :

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

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

Pour ajouter l’animation dans le navigateur, trouvez l’élément <svg> rendu, passez-le à animate et reliez le résultat à l’élément qui doit déclencher l’animation :

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

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