JavaScript

kubai-icons 可用純 JavaScript 建立圖示，並提供 <kubai-icon> Web Component。

安裝

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" 只有在建立圖示後立即同步加入頁面時才有效，如本範例所示。若要稍後再加入圖示，請參閱在伺服器端渲染，並自行綁定。

替換預留位置

在需要圖示的位置加入帶有 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>

使用 Web Component

加入一個 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);