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/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);