JavaScript

kubai-icons membuat ikon dari JavaScript biasa dan menyediakan web component <kubai-icon>.

Pasang

bash

npm install kubai-icons

Buat elemen

createIcon mengembalikan elemen <svg> yang dapat Anda tambahkan ke halaman:

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

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

trigger: "parent" hanya berfungsi jika Anda menambahkan ikon ke halaman secara sinkron setelah membuatnya, seperti pada contoh ini. Untuk menambahkan ikon nanti, lihat Render di server dan hubungkan sendiri.

Ganti placeholder

Tambahkan elemen dengan data-kubai di mana pun Anda ingin ikon, lalu panggil replaceIcons untuk mengganti setiap elemen dengan SVG-nya. Cantumkan setiap ikon yang Anda pakai di opsi icons. Contoh ini mengasumsikan 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>

Gunakan web component

Tambahkan satu tag script untuk memuat komponen dari CDN. Komponen mengunduh setiap file ikon saat ikon itu pertama kali dipakai.

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>

Render di server

toSvg mengembalikan ikon sebagai string HTML tanpa gerakan:

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

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

Untuk menambahkan gerakan di browser, temukan elemen <svg> yang sudah dirender, teruskan ke animate, dan hubungkan hasilnya ke elemen yang harus memulai gerakan:

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

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