कस्टमाइज़ेशन

आइकन का रंग, बैज, आकार और मोशन props और CSS custom properties से सेट होते हैं।

रंग

किसी आइकन के सभी रंग एक ही एक्सेंट रंग से निकाले जाते हैं। डिफ़ॉल्ट रूप से एक्सेंट currentColor है, इसलिए आप आइकन पर या किसी भी पूर्वज एलिमेंट पर CSS color प्रॉपर्टी सेट करके इसे बदल सकते हैं:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

रंग CSS color-mix() से निकाले जाते हैं, इसलिए color पर transition सभी ग्रेडिएंट को एक साथ बदलता है:

css

.kubai-icon { transition: color .3s ease; }

बैज

बैज वाला आइकन, जैसे folder-plus या user-check, के एक कोने में बैज होता है। डिफ़ॉल्ट रूप से बैज सफ़ेद चिह्न वाली गहरी डिस्क होता है। badgeColor डिस्क का रंग बदलता है। badgeColor="semantic" हर बैज के अनुरूप रंग चुनता है: जोड़ने और पूरा होने के लिए हरा, हटाने और रद्द करने के लिए लाल, चेतावनी के लिए एम्बर।

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

CSS custom properties

अलग-अलग शेड बदलने के लिए इन्हें आइकन पर या किसी भी पूर्वज एलिमेंट पर सेट करें। निशान आइकन पर बनी रेखाएँ और चिह्न हैं।

प्रॉपर्टी	नियंत्रण
`--ki-c`	ग्रेडिएंट और हल्के निशानों के लिए बेस रंग। डिफ़ॉल्ट: `currentColor`।
`--ki-e`	आउटलाइन और गहरे निशानों के लिए बेस रंग। डिफ़ॉल्ट: `--ki-c`।
`--ki-w`	उन निशानों का रंग जो डिफ़ॉल्ट रूप से सफ़ेद होते हैं।
`--ki-b`	बैज डिस्क का रंग। डिफ़ॉल्ट: न्यूट्रल गहरा स्लेटी।
`--ki-l`	बड़े ठोस फ़िल ऊपर की ओर कितना सफ़ेद होते जाते हैं, 0% से 100% तक।

variant="soft" --ki-b को छोड़कर इन सभी को सेट करता है।

पूरे पेज के लिए वेरिएंट सेट करें

वेरिएंट color की तरह इनहेरिट होता है। इसे किसी भी एलिमेंट पर सेट करें, और उसके अंदर के सभी आइकन उसका पालन करते हैं, जब तक उनका अपना variant न हो। नज़दीकी सेटिंग हमेशा जीतती है: पहले आइकन की अपनी prop, फिर सबसे नज़दीकी एलिमेंट, फिर डिफ़ॉल्ट color।

tsx

import { Folder, VARIANTS } from "kubai-icons-react";

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

यही ऑब्जेक्ट Vue में :style के साथ काम करता है। framework के बिना setVariant कॉल करें:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

स्टैटिक SVG फ़ाइलों में रंग लिखे होते हैं, इसलिए वेरिएंट फ़ोल्डर से चुनें: svg/ या svg-soft/।

आकार

आकार size prop से सेट करें। 24px और उससे छोटे आकार पर बैज वाले आइकन की जगह बेस आइकन उपयोग करें, क्योंकि वहाँ बैज के लिए जगह कम होती है। कैनवास का वर्णन डिज़ाइन भाषा में है।

मोशन

हर मोशन cubic-bezier(.22, 1, .36, 1) पर 460ms चलता है और आइकन की मौजूदा स्थिति से शुरू होता है, इसलिए बीच में उलटा हो सकता है। prefers-reduced-motion सेट होने पर आइकन बिना एनिमेशन के सीधे अंतिम पोज़ पर पहुँच जाते हैं।