Vue

kubai-icons-vue توفر كل أيقونة كمكوّن Vue. تتطلب Vue 3.3 أو أحدث.

التثبيت

bash

npm install kubai-icons-vue

الاستخدام

استورد أيقونة بالاسم واستخدمها في قالب:

vue

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

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

الخصائص

الخصائص هي size وcolor وvariant وbadgeColor وtrigger وhover وactive وdefaultActive وtitle. وتعمل كما هو موضح في جدول خصائص React. استخدم v-model:active لربط حالة التشغيل والإيقاف لأيقونة تبديل.

التشغيل من عنصر أب

لتشغيل الحركة عند تمرير المؤشر فوق زر كامل أو حصوله على تركيز لوحة المفاتيح، أضف data-kubai-trigger إلى الزر وtrigger="parent" إلى الأيقونة:

vue

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

الأيقونات بالاسم

إذا كان اسم الأيقونة معروفا وقت التشغيل فقط، مثل قيمة قادمة من API، فاستخدم DynamicIcon. تبقى كل أيقونة قطعة (chunk) مستقلة، فلا تتضمن الحزمة المجموعة كلها.

vue

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

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

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

العرض على الخادم

في Nuxt تُعرض المكوّنات على الخادم وتُضاف الحركة على العميل. استوردها حيث تُستخدم، أو سجّلها في إضافة (plugin). DynamicIcon استثناء: فهو يعرض عنصرا نائبا فارغا على الخادم ويحمّل الأيقونة في المتصفح.

الاستيراد المباشر

لتجنب تحميل فهرس الحزمة في خادم التطوير، استورد الأيقونة من ملفها الخاص:

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