React

kubai-icons-react توفر كل أيقونة كمكوّن React. تتطلب React 18 أو أحدث.

التثبيت

bash

npm install kubai-icons-react

الاستخدام

استورد أيقونة بالاسم واعرضها كمكوّن:

tsx

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

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

الخصائص

الخاصية	الافتراضي	الوصف
`size`	24	العرض والارتفاع بالبكسل.
`color`	currentColor	اللون الأساسي الذي تُشتق منه كل التدرجات والخطوط الخارجية والعلامات. راجع التخصيص.
`variant`	موروث، وإلا "color"	`"soft"` يستخدم تعبئة أفتح وخطوطا خارجية أغمق، ويرسم العلامات البيضاء بدرجة داكنة.
`badgeColor`	رمادي داكن	لون قرص الشارة: أي لون CSS، أو `"semantic"` للحصول على لون يناسب كل شارة، مثل الأخضر للإضافة والأحمر للإزالة والكهرماني للتحذير.
`trigger`	"hover"	`"hover"` يشغّل الحركة عند تمرير المؤشر فوق الأيقونة أو عند حصولها على تركيز لوحة المفاتيح. `"parent"` يفعل الشيء نفسه لأقرب عنصر أب يحمل `data-kubai-trigger`، أو للعنصر الأب المباشر إن لم يوجد. `"none"` لا يضيف أي مستمعين، فلا تُشغَّل الحركة إلا بواسطة الخاصية `hover`.
`hover`	لا شيء	`true` يشغّل الحركة و`false` يعكسها. اجمعه مع `trigger="none"` لتحكم كامل.
`active`, `defaultActive`, `onActiveChange`	لا شيء	حالة التشغيل والإيقاف لأيقونات التبديل، التي تنتقل بين حالتين عند النقر أو الضغط. `Bookmark` مثال على ذلك.
`title`	لا شيء	الاسم المتاح. من دونه تكون الأيقونة `aria-hidden`. راجع إتاحة الوصول.

تُمرَّر خصائص SVG الأخرى، مثل className وstyle ومعالجات الأحداث وref، إلى عنصر <svg>.

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

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

tsx

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

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

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

tsx

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

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

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

تعمل الأيقونات في مكوّنات الخادم ومكوّنات العميل في Next.js دون إعداد. تُعرض الشيفرة على الخادم وتُضاف الحركة عند الترطيب (hydration). DynamicIcon استثناء: فهو يعرض عنصرا نائبا فارغا على الخادم ويحمّل الأيقونة في المتصفح.

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

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

tsx

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