JavaScript

kubai-icons는 순수 JavaScript로 아이콘을 만들며 <kubai-icon> 웹 컴포넌트를 제공합니다.

설치

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>

웹 컴포넌트 사용

스크립트 태그 하나를 추가해 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);