عن المشروع

# Ionicons [Ionicons](http://ionicons.com/) هي مجموعة أيقونات مفتوحة المصدر بالكامل تضم 1300 أيقونة مصممة لتطبيقات الويب وiOS وAndroid وسطح المكتب. تم بناء Ionicons خصيصًا لـ [إطار عمل Ionic](https://ionicframework.com/)، لذا تحتوي الأيقونات على نسختين: Material Design وiOS. ملاحظة: جميع أيقونات العلامات التجارية هي علامات تجارية مملوكة لأصحابها. استخدام هذه العلامات التجارية لا يعني تأييد مالك العلامة من قبل Ionic، ولا العكس. ننوي استخدام هذه الحزمة من الأيقونات مع [Ionic](http://ionicframework.com/)، ولكنها ليست محدودة به بأي حال. استخدمها أينما تراه مناسبًا، سواء للاستخدام الشخصي أو التجاري. إنها مجانية الاستخدام ومرخصة بموجب [MIT](http://opensource.org/licenses/MIT). ## المساهمة شكرًا لاهتمامك بالمساهمة! اقرأ إرشاداتنا الخاصة بـ [المساهمة](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md) ثم تصفح مشكلاتنا الموسومة بـ [مطلوب مساعدة](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22). ## استخدام مكون الويب مكون ويب Ionicons هو طريقة سهلة وفعالة لاستخدام الأيقونات في تطبيقك. يقوم المكون بتحميل ملف SVG ديناميكيًا لكل أيقونة، لذا يطلب تطبيقك فقط الأيقونات التي تحتاجها. لاحظ أيضًا أنه يتم تحميل الأيقونات المرئية فقط، والأيقونات "غير المرئية" والمخفية عن نظر المستخدم لا تقوم بطلبات جلب لملفات SVG. ### التثبيت إذا كنت تستخدم [إطار عمل Ionic](https://ionicframework.com/)، فإن Ionicons مضمّن افتراضيًا، لذا لا حاجة للتثبيت. تريد استخدام Ionicons بدون إطار عمل Ionic؟ ضع وسم `<script>` التالي في نهاية صفحتك، قبل وسم إغلاق `</body>` مباشرة، لتفعيلها. ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` يمكنك استبدال `latest` لاختيار أي إصدار من Ionicons، على سبيل المثال: ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### الاستخدام الأساسي لاستخدام أيقونة مدمجة من حزمة Ionicons، املأ خاصية `name` في عنصر ion-icon: ```html <ion-icon name="heart"></ion-icon> ``` ### أيقونات مخصصة لاستخدام SVG مخصص، قدم عنوان URL في خاصية `src` لطلب ملف SVG خارجي. تعمل خاصية `src` بنفس طريقة `<img src="...">` حيث يجب أن يكون العنوان متاحًا من صفحة الويب التي تطلب الصورة. بالإضافة إلى ذلك، يمكن أن يكون الملف الخارجي SVG صالحًا فقط ولا يسمح بوجود نصوص برمجية أو أحداث داخل عنصر SVG. ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### مسار الأصول المخصص إذا كان لديك مجموعة أيقونات مختلفة تريد تحميلها أو إذا كانت أيقونات Ionicon مستضافة على صفحة أو مسار مختلف، يمكنك تعيين عنوان URL للأصول الذي يسحب منه Ionicons الأيقونات عبر: ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // تعيين المسار الجذر لتحميل الأيقونات إلى "<root>/public/svg" setAssetPath(`${window.location.origin}/public/svg/`); // تحميل أيقونات محددة فقط addIcons({ add, logoIonic, save }); ``` هذا يسمح باستخدام أيقونات مسماة مثل: ```html <!-- الآن يسحب الـ svg من "<root>/public/svg/heart.svg" --> <ion-icon name="heart"></ion-icon> ``` ## الأشكال المختلفة كل أيقونة تطبيق في Ionicons لها شكل `filled` و`outline` و`sharp`. هذه الأشكال المختلفة مقدمة لجعل تطبيقك يبدو طبيعيًا على منصات متنوعة. الشكل المملوء يستخدم الاسم الافتراضي بدون لاحقة. ملاحظة: أيقونات الشعارات ليس لها أشكال outline أو sharp. ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### الخصوصية حسب المنصة عند استخدام الأيقونات في إطار عمل Ionic، يمكنك تحديد أيقونات مختلفة لكل منصة. استخدم خاصيتي `md` و`ios` وقدم اسم الأيقونة/الشكل الخاص بالمنصة. ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## الحجم لتحديد حجم الأيقونة، يمكنك استخدام خاصية size لأحجام الخطوط المعرفة مسبقًا. ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` أو يمكنك تعيين حجم محدد بتطبيق خاصية CSS `font-size` على عنصر `ion-icon`. يُنصح باستخدام أحجام بكسل مضاعفة للرقم 8 (8، 16، 32، 64، إلخ) ```css ion-icon { font-size: 64px; } ``` ## اللون حدد لون الأيقونة بتطبيق خاصية CSS `color` على عنصر `ion-icon`. ```css ion-icon { color: blue; } ``` ## عرض الخط عند استخدام شكل `outline`، يمكن ضبط عرض الخط لتحسين التوازن البصري بالنسبة لحجم الأيقونة أو عرض النص المجاور. يمكنك تعيين حجم محدد بتطبيق خاصية CSS المخصصة `--ionicon-stroke-width` على عنصر `ion-icon`. القيمة الافتراضية هي 32 بكسل. ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## الترحيل من v4 راجع [ملاحظات إصدار 5.0](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) للحصول على قائمة بحذف/إعادة تسمية الأيقونات. ## الترخيص Ionicons مرخصة بموجب [رخصة MIT](http://opensource.org/licenses/MIT). ## ذات صلة * [صفحة Ionicons الرئيسية](http://ionicons.com/) * [إطار عمل Ionic](https://ionicframework.com/) * [ديسكورد Ionic](https://ionic.link/discord) * [منتدى Ionic](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)