परिचय
Kubai Icons होवर मोशन वाले लेयर्ड SVG आइकन की ओपन-सोर्स लाइब्रेरी है। यह पेज पैकेज सूचीबद्ध करता है और बताता है कि आइकन के नाम और संस्करण कैसे तय होते हैं।
हर आइकन अपने सारे शेड एक ही एक्सेंट रंग से लेता है। होवर करने पर वह दिखाता है कि वस्तु क्या करती है: फ़ोल्डर खुलता है, लिफ़ाफ़ा खुलता है। हर आइकन एक अलग ES मॉड्यूल है जिसमें उसकी स्थिर अवस्था का SVG markup, यानी रेस्ट पोज़, और उसका होवर मोशन होता है।
पैकेज
| पैकेज | इसके लिए उपयोग करें | डॉक्स |
|---|---|---|
kubai-icons-react | React 18+ और Next.js, सर्वर रेंडरिंग सहित | React पैकेज |
kubai-icons-vue | Vue 3.3+ और Nuxt | Vue पैकेज |
kubai-icons | सादा JavaScript और <kubai-icon> web component | JavaScript पैकेज |
kubai-icons-static | <img> टैग, डिज़ाइन टूल और बिना JavaScript वाले पेजों के लिए SVG फ़ाइलें | स्टैटिक SVG पैकेज |
क्विक स्टार्ट
यह उदाहरण React उपयोग करता है। दूसरे वातावरण के लिए ऊपर सूचीबद्ध पैकेज देखें। पैकेज इंस्टॉल करें:
npm install kubai-icons-reactफिर जो आइकन चाहिए उन्हें इंपोर्ट करें:
import { Folder, MailPlus } from "kubai-icons-react";
export default function App() {
return (
<>
<Folder /> {/* 24px, in the text color */}
<MailPlus size={32} color="#EC4899" /> {/* any CSS color */}
</>
);
}आइकन के नाम
आइकन के नाम अंग्रेज़ी में और kebab-case में होते हैं: folder, cloud-rain, arrow-up-right। JavaScript, React और Vue पैकेज उन्हें PascalCase में export करते हैं, जैसे CloudRain। React और Vue CloudRainIcon भी export करते हैं। स्टैटिक फ़ाइलें kebab-case नाम ही रखती हैं। आइकन ब्राउज़र नाम और टैग खोजता है।
कई बेस आइकन बैज वाले रूप में भी मिलते हैं, जैसे folder-plus, user-check और calendar-clock। जिन चीज़ों को बंद किया जा सकता है, उनके आइकन तिरछी रेखा वाले रूप में भी मिलते हैं, जैसे bell-off।
संस्करण
पैकेज semantic versioning का पालन करते हैं और एक साथ रिलीज़ होते हैं। आइकन का नाम बदलना या उसे हटाना breaking change है; उसे दोबारा बनाना नहीं है। रिलीज़ नोट GitHub पर प्रकाशित होते हैं।