مقدمة

Kubai Icons مكتبة مفتوحة المصدر من أيقونات SVG متعددة الطبقات بحركة عند التمرير. تسرد هذه الصفحة الحزم وتشرح كيفية تسمية الأيقونات وإصدارها.

تأخذ كل أيقونة جميع درجاتها من لون أساسي واحد. عند التمرير، تؤدي ما يفعله الشيء الحقيقي: المجلد ينفتح، والمظروف يُفتح. كل أيقونة وحدة ES مستقلة تحوي شيفرة SVG لحالتها الساكنة، وتسمى وضعية السكون، وحركة التمرير الخاصة بها.

الحزم

الحزمة	الاستخدام	التوثيق
`kubai-icons-react`	React 18 والإصدارات الأحدث وNext.js، مع العرض على الخادم	حزمة React
`kubai-icons-vue`	Vue 3.3 والإصدارات الأحدث وNuxt	حزمة Vue
`kubai-icons`	JavaScript العادي ومكوّن الويب `<kubai-icon>`	حزمة JavaScript
`kubai-icons-static`	ملفات SVG لوسوم `<img>` وأدوات التصميم والصفحات التي لا تستخدم JavaScript	حزمة SVG الثابتة

بداية سريعة

يستخدم هذا المثال React. لبيئات أخرى، راجع الحزم المذكورة أعلاه. ثبّت الحزمة:

bash

npm install kubai-icons-react

ثم استورد الأيقونات التي تحتاجها:

tsx

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، مثل CloudRain. تصدّر React وVue أيضا CloudRainIcon. تحتفظ الملفات الثابتة باسم kebab-case. يبحث متصفح الأيقونات في الأسماء والوسوم.

كثير من الأيقونات الأساسية متوفر أيضا بصيغة أيقونات ذات شارة، مثل folder-plus وuser-check وcalendar-clock. والأيقونات الخاصة بما يمكن إيقافه متوفرة أيضا بصيغة مشطوبة، مثل bell-off.

الإصدارات

تتبع الحزم الإصدار الدلالي (semantic versioning) وتُصدر معا. إعادة تسمية أيقونة أو حذفها تغيير جذري، أما إعادة رسمها فلا. تُنشر ملاحظات الإصدار على GitHub.