React

kubai-icons-react हर आइकन को React component के रूप में देता है। इसके लिए React 18 या नया संस्करण चाहिए।

इंस्टॉल करें

bash

npm install kubai-icons-react

उपयोग

नाम से आइकन इंपोर्ट करें और उसे component के रूप में रेंडर करें:

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Props

Prop	डिफ़ॉल्ट	विवरण
`size`	24	पिक्सल में चौड़ाई और ऊँचाई।
`color`	currentColor	वह एक्सेंट रंग जिससे सभी ग्रेडिएंट, आउटलाइन और निशान निकाले जाते हैं। कस्टमाइज़ेशन देखें।
`variant`	इनहेरिट होता है, नहीं तो "color"	`"soft"` हल्की फ़िल और गहरी आउटलाइन का उपयोग करता है, और सफ़ेद निशान गहरे शेड में बनाता है।
`badgeColor`	गहरा स्लेटी	बैज डिस्क का रंग: कोई भी CSS रंग, या `"semantic"`, जो हर बैज के अनुरूप रंग चुनता है, जैसे जोड़ने के लिए हरा, हटाने के लिए लाल और चेतावनी के लिए एम्बर।
`trigger`	"hover"	`"hover"` आइकन पर होवर करने या कीबोर्ड फ़ोकस आने पर मोशन चलाता है। `"parent"` यही काम सबसे नज़दीकी उस पूर्वज एलिमेंट के लिए करता है जिस पर `data-kubai-trigger` हो, और ऐसा न होने पर सीधे पैरेंट के लिए। `"none"` कोई listener नहीं जोड़ता, इसलिए मोशन केवल `hover` prop से चलता है।
`hover`	कोई नहीं	`true` मोशन चलाता है और `false` उसे उलटा चलाता है। पूरे नियंत्रण के लिए इसे `trigger="none"` के साथ उपयोग करें।
`active`, `defaultActive`, `onActiveChange`	कोई नहीं	टॉगल आइकन की चालू/बंद स्थिति, जो क्लिक या टैप करने पर दो स्थितियों के बीच बदलते हैं। `Bookmark` इसका एक उदाहरण है।
`title`	कोई नहीं	एक्सेसिबल नाम। इसके बिना आइकन `aria-hidden` रहता है। एक्सेसिबिलिटी देखें।

दूसरे SVG props, जैसे className, style, event handler और ref, सीधे <svg> तक पहुँचते हैं।

पैरेंट से ट्रिगर करें

पूरा बटन होवर होने या कीबोर्ड फ़ोकस पाने पर मोशन चलाने के लिए बटन में data-kubai-trigger और आइकन में trigger="parent" जोड़ें:

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

नाम से आइकन

अगर आइकन का नाम केवल runtime पर पता चलता है, जैसे किसी API से मिला मान, तो DynamicIcon उपयोग करें। हर आइकन फिर भी अलग chunk रहता है, इसलिए bundle में पूरा सेट शामिल नहीं होता।

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

सर्वर रेंडरिंग

आइकन Next.js के Server Components और Client Components में बिना किसी कॉन्फ़िगरेशन के काम करते हैं। markup सर्वर पर रेंडर होता है, और मोशन hydration पर जुड़ता है। DynamicIcon अपवाद है: यह सर्वर पर खाली placeholder रेंडर करता है और आइकन को ब्राउज़र में लोड करता है।

डीप इंपोर्ट

dev सर्वर में पैकेज इंडेक्स लोड होने से बचने के लिए आइकन को उसकी अपनी फ़ाइल से इंपोर्ट करें। परफ़ॉर्मेंस देखें।

tsx

import Folder from "kubai-icons-react/icons/folder";