JavaScript

kubai-icons tạo biểu tượng từ JavaScript thuần và cung cấp web component <kubai-icon>.

Cài đặt

bash

npm install kubai-icons

Tạo một phần tử

createIcon trả về một phần tử <svg> mà bạn có thể thêm vào trang:

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

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

trigger: "parent" chỉ hoạt động nếu bạn thêm biểu tượng vào trang ngay sau khi tạo, như trong ví dụ này. Để thêm biểu tượng sau đó, xem Kết xuất trên máy chủ và tự gắn sự kiện.

Thay thế phần giữ chỗ

Thêm một phần tử có data-kubai ở nơi bạn muốn đặt biểu tượng, rồi gọi replaceIcons để thay mỗi phần tử bằng SVG của nó. Liệt kê mọi biểu tượng bạn dùng trong tùy chọn icons. Ví dụ này giả định bạn dùng trình đóng gói:

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>

Dùng web component

Thêm một thẻ script để tải component từ CDN. Component tải tệp của từng biểu tượng vào lần đầu biểu tượng đó được dùng.

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>

Kết xuất trên máy chủ

toSvg trả về biểu tượng dưới dạng chuỗi HTML, không có chuyển động:

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

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

Để thêm chuyển động trong trình duyệt, hãy tìm phần tử <svg> đã kết xuất, truyền nó cho animate, và nối kết quả với phần tử sẽ khởi động chuyển động:

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

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