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" तभी काम करता है जब आप आइकन बनाने के तुरंत बाद उसे पेज में जोड़ें, जैसा इस उदाहरण में है। आइकन को बाद में जोड़ने के लिए सर्वर पर रेंडर करें देखें और उसे खुद bind करें।

Placeholder बदलें

जहाँ आइकन चाहिए वहाँ data-kubai वाला एलिमेंट जोड़ें, फिर replaceIcons को कॉल करें ताकि हर एलिमेंट अपनी SVG से बदल जाए। जो भी आइकन आप उपयोग करते हैं, उन सभी को icons विकल्प में सूचीबद्ध करें। इस उदाहरण में bundler माना गया है:

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 उपयोग करें

CDN से component लोड करने के लिए एक script टैग जोड़ें। हर आइकन की फ़ाइल पहली बार उपयोग होने पर ही डाउनलोड होती है।

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