react icons
v5.3.0
قم بتضمين الأيقونات الشائعة في مشاريع React الخاصة بك بسهولة باستخدام react-icons ، والتي تستخدم واردات ES6 التي تسمح لك بتضمين الأيقونات التي يستخدمها مشروعك فقط.
yarn add react-icons
# or
npm install react-icons --saveاستخدام المثال
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} راجع الوثائق لمزيد من أمثلة الاستخدام وكيفية استخدام الرموز من الحزم الأخرى. ملاحظة : تحتوي كل حزمة أيقونة على مجلد فرعي خاص بها ضمن react-icons التي تستورد منها.
على سبيل المثال، لاستخدام أيقونة من تصميم متعدد الأبعاد ، ستكون عملية الاستيراد الخاصة بك على النحو التالي: import { ICON_NAME } from 'react-icons/md';
ملاحظة: لم يكن لدى هذا الخيار إصدار جديد لبعض الوقت. مزيد من المعلومات #593
إذا زاد حجم مشروعك، فهذا الخيار متاح. تحتوي هذه الطريقة على المفاضلة التي تستغرق وقتًا طويلاً لتثبيت الحزمة.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --saveاستخدام المثال
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | مكتبة الأيقونات | رخصة | إصدار | عدد |
|---|---|---|---|
| أيقونات الدائرة | رخصة MPL-2.0 | 1.0.0 | 288 |
| الخط رائع 5 | رخصة CC BY 4.0 | 5.15.4-3-gafecf2a | 1612 |
| الخط رائع 6 | رخصة CC BY 4.0 | 6.5.2 | 2045 |
| الأيونات 4 | معهد ماساتشوستس للتكنولوجيا | 4.6.3 | 696 |
| الأيونات 5 | معهد ماساتشوستس للتكنولوجيا | 5.5.4 | 1332 |
| أيقونات تصميم المواد | ترخيص أباتشي الإصدار 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| أيقونات | سي سي بي-سا 3.0 | 2.1.2 | 336 |
| أيقونات جيثب أوكتيكونس | معهد ماساتشوستس للتكنولوجيا | 18.3.0 | 264 |
| ريشة | معهد ماساتشوستس للتكنولوجيا | 4.29.1 | 287 |
| لوسايد | مركز الدراسات الدولي | v5.1.0-6-g438f572e | 1215 |
| أيقونات اللعبة | سي سي بي 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| أيقونات الطقس | سيل أو إف إل 1.1 | 2.0.12 | 219 |
| ديفيكونز | معهد ماساتشوستس للتكنولوجيا | 1.8.0 | 192 |
| أيقونات تصميم النمل | معهد ماساتشوستس للتكنولوجيا | 4.4.2 | 831 |
| أيقونات التمهيد | معهد ماساتشوستس للتكنولوجيا | 1.11.3 | 2716 |
| أيقونة ريمكس | ترخيص أباتشي الإصدار 2.0 | 4.2.0 | 2860 |
| أيقونات ملونة مسطحة | معهد ماساتشوستس للتكنولوجيا | 1.0.2 | 329 |
| جروميت-الأيقونات | ترخيص أباتشي الإصدار 2.0 | 4.12.1 | 635 |
| الأبطال | معهد ماساتشوستس للتكنولوجيا | 1.0.6 | 460 |
| الأبطال 2 | معهد ماساتشوستس للتكنولوجيا | 2.1.3 | 888 |
| أيقونات بسيطة | CC0 1.0 عالمي | 12.14.0 | 3209 |
| أيقونات خط بسيط | معهد ماساتشوستس للتكنولوجيا | 2.5.5 | 189 |
| ايكو مون مجاني | رخصة CC BY 4.0 | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| BoxIcons | معهد ماساتشوستس للتكنولوجيا | 2.1.4 | 1634 |
| css.gg | معهد ماساتشوستس للتكنولوجيا | 2.1.1 | 704 |
| أيقونات رمز VS | سي سي بي 4.0 | 0.0.35 | 461 |
| أيقونات الجدول | معهد ماساتشوستس للتكنولوجيا | 3.2.0 | 5237 |
| ثيمافي الأيقونات | معهد ماساتشوستس للتكنولوجيا | v0.1.2-2-g9600186 | 352 |
| أيقونات راديكس | معهد ماساتشوستس للتكنولوجيا | @radix-ui/[email protected] | 318 |
| أيقونات الفوسفور | معهد ماساتشوستس للتكنولوجيا | 2.1.1 | 9072 |
| Icons8 خط رائع | معهد ماساتشوستس للتكنولوجيا | 1.3.1 | 1544 |
يمكنك إضافة المزيد من الرموز عن طريق إرسال طلبات السحب أو إنشاء المشكلات.
يمكنك تكوين دعائم أيقونات التفاعل باستخدام React context API.
يتطلب React 16.3 أو أعلى.
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| مفتاح | تقصير | ملحوظات |
|---|---|---|
color | undefined (وراثة) | |
size | 1em | |
className | undefined | |
style | undefined | يمكن الكتابة فوق الحجم واللون |
attr | undefined | استبداله بسمات أخرى |
title | undefined | وصف الرمز لإمكانية الوصول |
لقد تغير مسار الاستيراد. تحتاج إلى إعادة الكتابة من النمط القديم.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}هل ينتهي بك الأمر بحزمة JS كبيرة؟ تحقق من هذه المسألة.
من الإصدار 3، vertical-align: middle تلقائيًا. الرجاء استخدام IconContext لتحديد className أو تحديد نمط مضمّن.
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className العالميةعنصر
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
} يمكن حذف التبعيات على @types/react-icons .
yarn remove @types/react-iconsnpm remove @types/react-icons ./build-script.sh سيقوم ببناء المشروع بأكمله. راجع أيضًا البرامج النصية لـ CI لمزيد من المعلومات.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn buildأولاً، قم بمراجعة المناقشة لمعرفة ما إذا كان أي شخص يرغب في إضافة مجموعة أيقونات.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
تتم إدارة ملفات SVG المراد جلبها في هذا الملف. قم بتحرير هذا الملف وتشغيل yarn fetch && yarn check && yarn build .
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
ملاحظة: لا يقبل المشروع العلاقات العامة لموقع المعاينة بشكل نشط في الوقت الحالي.
موقع المعاينة هو موقع react-icons ، المبني في Astro+React.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start العرض التوضيحي عبارة عن نموذج إنشاء تطبيق React مع إضافة react-icons كتبعية للاختبار السهل.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start يتم دعم SVG بواسطة جميع المتصفحات الرئيسية. باستخدام react-icons ، يمكنك تقديم الأيقونات المطلوبة فقط بدلاً من ملف خط كبير واحد للمستخدمين، مما يساعدك على التعرف على الأيقونات المستخدمة في مشروعك.
معهد ماساتشوستس للتكنولوجيا
