Vue

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

इंस्टॉल करें

bash

npm install kubai-icons-vue

उपयोग

नाम से आइकन इंपोर्ट करें और उसे template में उपयोग करें:

vue

<script setup>
import { Folder, BellOff } from "kubai-icons-vue";
</script>

<template>
  <Folder :size="28" color="#6366F1" />
  <BellOff variant="soft" title="Muted" />
</template>

Props

props हैं size, color, variant, badgeColor, trigger, hover, active, defaultActive और title। ये वैसे ही काम करते हैं जैसा React props तालिका में बताया गया है। टॉगल आइकन की चालू/बंद स्थिति को bind करने के लिए v-model:active उपयोग करें।

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

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

vue

<button data-kubai-trigger>
  <Trash :size="18" trigger="parent" />
  Delete
</button>

नाम से आइकन

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

vue

<script setup>
import { DynamicIcon } from "kubai-icons-vue/dynamic";

defineProps({ name: String });
</script>

<template>
  <DynamicIcon :name="name" />
</template>

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

Nuxt में component सर्वर पर रेंडर होते हैं, और मोशन क्लाइंट पर जुड़ता है। उन्हें जहाँ उपयोग करें वहीं इंपोर्ट करें, या किसी plugin में रजिस्टर करें। DynamicIcon अपवाद है: यह सर्वर पर खाली placeholder रेंडर करता है और आइकन को ब्राउज़र में लोड करता है।

डीप इंपोर्ट

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

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