JavaScript

kubai-icons は、プレーンな JavaScript からアイコンを作成し、<kubai-icon> Web コンポーネントを提供します。

インストール

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 コンポーネントを使う

スクリプトタグを 1 つ追加すると、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);