JavaScript

kubai-icons создаёт иконки из обычного JavaScript и предоставляет веб-компонент <kubai-icon>.

Установка

bash

npm install kubai-icons

Создание элемента

createIcon возвращает элемент <svg>, который можно добавить на страницу:

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

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

trigger: "parent" работает, только если добавить иконку на страницу синхронно сразу после создания, как в этом примере. Чтобы добавить иконку позже, см. Рендеринг на сервере и привяжите обработчики самостоятельно.

Замена placeholder

Добавьте элемент с data-kubai там, где нужна иконка, затем вызовите replaceIcons, чтобы заменить каждый элемент его SVG. Перечислите все используемые иконки в параметре icons. В примере предполагается, что используется сборщик:

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>

Использование веб-компонента

Добавьте один тег script, чтобы загрузить компонент с CDN. Файл каждой иконки скачивается при первом её использовании.

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>

Рендеринг на сервере

toSvg возвращает иконку в виде HTML-строки без анимации:

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

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

Чтобы добавить анимацию в браузере, найдите отрисованный элемент <svg>, передайте его в animate и свяжите результат с элементом, который должен запускать анимацию:

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

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