یک نماد منفرد با طراحی زیبا می‌تواند اعمال و ایده‌های پیچیده را به زبانی جهانی که در یک نگاه قابل درک است، به اشتراک بگذارد و ثابت کند که نمادها چقدر در ارتقای تجربه کلی کاربر نقش مهمی دارند. اما از کجا می توانید چنین نمادهایی را به عنوان یک توسعه دهنده React تهیه کنید؟

پاسخ، کتابخانه‌های آیکون‌ها است - یا برای رفتن یک قدم جلوتر، کتابخانه‌های نماد React . کتابخانه آیکون React اساساً مجموعه ای از آیکون های SVG آماده برای استفاده است که می تواند مستقیماً به پروژه React شما وارد شود. این کتابخانه ها نصب پکیج npm، pnpm یا Yarn را ارائه می دهند که پس از آن می توانید هر نمادی را از آنها تنها با چند دستور وارد کنید.

این مقاله آپشن های مختلف React Icons ( react-icons ) را ارائه می‌کند که یکی از بهترین و محبوب‌ترین کتابخانه‌های آیکون مورد استفاده در React است. همچنین شامل چندین کتابخانه آیکون است که در کتابخانه React Icons گنجانده نشده‌اند، اما ارزش تحلیل دارند.

React Icons و ویژگی های آن

React Icons یک پروژه منبع باز است که به شما امکان می دهد تنها با نصب یک بسته، از بیش از 30 مجموعه آیکون به صورت یکپارچه استفاده کنید. محبوبیت آن در حال افزایش است زیرا مردم از کتابخانه های دیگر به این پروژه تبدیل می شوند. در حال حاضر، به طور متوسط ​​بیش از 1.5 میلیون بارگیری npm هفتگی و نزدیک به 11 هزار ستاره GitHub در زمان نوشتن این مقاله است.

این فقط شامل کتابخانه‌های با کیفیت بالا و شناخته شده است که در مجموع بیش از 45000 نماد می‌سازند، پس این شانس وجود دارد که همیشه آنچه را که به دنبالش هستید بیابید. همچنین شامل کتابخانه هایی است که برای موارد استفاده خاص، مانند یک برنامه کاربردی، تخصصی هستند.

برای ارائه ایده ای از کتابخانه های آن، برخی از کتابخانه های محبوب که ممکن است بشناسید بدون ترتیب خاصی در زیر فهرست شده اند:

فونت عالی (رایگان)

نمادهای جدول

آیکون های فسفر

BoxIcons

خط عالی

نمادهای طراحی مورچه

آیکون های ریمیکس

آیکون های بوت استرپ

نمادهای طراحی متریال

نمادهای قهرمان

نمادهای رادیکس

یکی از معایب استفاده از React Icons - به خصوص اگر از آیکون‌هایی از کتابخانه‌های آیکون مختلف استفاده می‌کنید - می‌تواند ترس از ناهماهنگی باشد، پس باید به طور کامل برای مورد استفاده خود آزمایش کنید. با این حال، اگر این تنها چیزی است که برای پروژه React خود نیاز دارید، می‌توان از React Icons برای وارد کردن آیکون‌های محبوب از یک کتابخانه استفاده کرد، و واقعاً نمی‌توانید با هیچ یک از گزینه‌های ذکر شده در بالا اشتباه کنید.

اما React Icons مزایای قابل توجهی نیز دارد. یک سوال در ذهن شما می تواند مربوط به اندازه باشد، زیرا به نظر می رسد یک بسته بزرگ است که می تواند بر عملکرد برنامه یا سایت شما تأثیر بگذارد. اما نکته خوب این است که React Icons از واردات ES6 استفاده می کند.

به جای اضافه کردن کل مجموعه آیکون ها به پروژه خود (که می تواند بسیار بزرگ باشد)، می توانید فقط موارد مورد نیاز خود را وارد کنید. این واردات انتخابی به کوچکتر و کارآمد نگه داشتن اندازه پروژه شما کمک می کند. علاوه بر این، React Icons فقط از SVG استفاده می‌کند که به دلیل درخواست‌های شبکه کمتر و اندازه‌های کوچک‌تر، بهترین قالب آیکون امروزه در نظر گرفته می‌شود.

آخرین چیزی که قبل از حرکت به سمت استفاده باید در نظر داشته باشید این است که هر کتابخانه آیکون در React Icons از مجوز مشخص شده خود استفاده می کند. در حالی که همه کتابخانه‌های نماد منبع باز هستند و استفاده تجاری را مجاز می‌کنند، برخی از آنها نیاز به ذکر منبع مانند مجوزهای Creative Commons دارند. از سایت React Icons یا صفحه npm آن می توانید تحلیل کنید که چه کتابخانه ای از کدام مجوز استفاده می کند.

استفاده از React Icons

بهترین بخش React Icons سادگی و سهولت استفاده آن است. تنها کاری که باید انجام دهید این است که بسته را از طریق npm یا Yarn نصب کنید، کتابخانه مربوطه خود را وارد کنید و اکنون آماده استفاده از نمادهای آن هستید.

با نصب بسته در ترمینال خود شروع کنید:

 npm install react-icons --save

روش دیگر، می توانید این کار را انجام دهید:

 yarn add react-icons

حالا کلمه کلیدی خود را جستجو کنید و هر نمادی را که دوست دارید انتخاب کنید. در مورد ما، به نظر می رسد آنچه در تصویر زیر است.

نکته: اگر می‌خواهید نمادهای بیشتری را از یک کتابخانه خاص جستجو کنید، پیشوند آن را در جلو اضافه کنید. جستجوی "fa Alarm" نشان دادن نمادها از کتابخانه Font Awesome را در اولویت قرار می دهد.

اولین دستوری که می بینید دستوری است که باید برای وارد کردن این نماد خاص به پروژه خود وارد کنید. دومی یک فرمان نیست، بلکه نام کامپوننت است، که برای کپی کردن مفید است، زیرا نمی خواهید هر بار که می خواهید از آن استفاده کنید، آن را تایپ کنید.

بازگشت به وارد کردن نمادها:

 import { CiAlarmOn } from "react-icons/ci" ;

و برای وارد کردن چندین نماد از یک کتابخانه:

 import { CiAlarmOn , CiAlarmOff } from "react-icons/ci" ;

بهترین بخش در مورد همه اینها این است که هر نماد یک مؤلفه React است، که استفاده از آنها را در هر کجا که می خواهید بسیار آسان می کند:

 import { CiAlarmOn , CiAlarmOff } from "react-icons/ci" ; class Alarm extends React . Component { render ( ) { return & lt ; h3 & gt ; & lt ; CiAlarmOff / & gt ; You need to wake up ! & lt ; CiAlarmOn / & gt ; & lt ; / h3 & gt ; } }

همچنین می توان رنگ و اندازه این نمادها را با استفاده از IconContext تغییر داد. اطلاعات بیشتر در مورد پیکربندی و استفاده را می توانید در اینجا بیابید.

با بیش از 45 هزار آیکون از 30 کتابخانه آیکون های مختلف به علاوه پیاده سازی آسان، React Icons ممکن است تنها کتابخانه آیکونی باشد که برای پروژه های React خود نیاز دارید.

5 کتابخانه مفید React Icon در کتابخانه React Icons موجود نیستند

با این حال، اگر نمی‌توانید نمادهای ایده‌آل خود را پیدا کنید یا می‌خواهید گزینه‌های دیگر را امتحان کنید، در زیر تعدادی از کتابخانه‌های آیکون‌هایی هستند که در React Icons گنجانده نشده‌اند (حداقل در حال حاضر).

1. MUI Material Icons

Material UI (MUI) یک کتابخانه منبع باز است که اجزای React را بر اساس طراحی متریال گوگل ارائه می دهد. این فقط یک کتابخانه نماد نیست، بلکه مجموعه ای جامع از ابزارهای رابط کاربری است که برای کمک به توسعه و استقرار سریع پروژه ها طراحی شده است.

آیکون‌های MUI Material از پشتیبانی و تایید طولانی‌مدت در میان توسعه‌دهندگان برخوردار هستند، زیرا در زمان نوشتن این مقاله، بیش از 2.5 میلیون بارگیری هفتگی npm و بیش از 90 هزار ستاره GitHub دارند. طرفداران توسعه دهندگان طراحی آیکون های مواد گوگل، این کتابخانه منبع باز را دوست خواهند داشت زیرا از بیش از 2000 نماد شیک و مدرن تشکیل شده است. در حالی که React Icons شامل آیکون‌های اصلی Google است، پیاده‌سازی MUI کمی بصری‌تر به نظر می‌رسد.

یک مثال در زیر نشان داده شده است، پس خودتان قضاوت کنید. (رنگ ها را نادیده بگیرید، زیرا می توان آنها را تغییر داد).

به ترتیب" loading="lazy">

Google's Material Icon و پیاده سازی MUI به ترتیب

اگر می‌خواهید MUI را امتحان کنید، می‌توانید به مستندات آن در مورد نصب بسته React و وارد کردن آیکون‌ها مراجعه کنید. همچنین به پیکربندی اندازه و رنگ کمک می کند.

2. فونت Awesome Pro

Font Awesome یک کتابخانه بسیار محبوب و دومین فناوری اسکریپت فونت مورد استفاده در اینترنت است، درست پس از فونت های گوگل. طیف گسترده ای از آیکون ها را ارائه می دهد که دسته بندی های مختلف از جمله رسانه های اجتماعی، وب، تجارت و موارد دیگر را پوشش می دهد.

همچنین دارای چندین ادغام برای استفاده از این نمادها از جمله کامپوننت Figma خود، AngularJS، Vue و البته React است.

در حال حاضر، بیش از 4000 آیکون رایگان (نسخه 5، 6) ارائه می دهد در حالی که برنامه پولی این رقم را به بیش از 30،000 آیکون می رساند. اما تمرکز اصلی این بخش Font Awesome Pro است، زیرا آیکون های رایگان در حال حاضر در React Icons موجود است.

اگر توسعه‌دهنده‌ای هستید که اغلب وب‌سایت‌هایی ایجاد می‌کنید و علاقه جانبی به طراحی دارید، ممکن است Font Awesome Pro ارزش تحلیل را داشته باشد. برخی از ویژگی های طرح پولی عبارتند از:

قابلیت سفارشی سازی آسان تر برای اندازه، رنگ و تغییرات عمده خود نماد

پیاده سازی بهتر با استفاده از Font Awesome Kit

توانایی آپلود آیکون های خود در کیت برای استفاده در کنار فونت عالی

پهنای باند رجیستری خصوصی برای پروژه های شما با استفاده از رجیستری های خصوصی npm، Ruby و Python

Font Awesome کامپوننت React مخصوص به خود را نیز دارد، پس درست مانند React Icons، می توانید به راحتی با چند دستور آیکون های آن را در پروژه خود ادغام کنید. مستندات Font Awesome در مورد استفاده کاملاً دقیق و بیش از اندازه کافی برای شروع است.

جستجو و پیمایش در میان نمادها یکپارچه است و اگر ترجیح می دهید به جای جستجوی کلمات کلیدی پیمایش دستی را داشته باشید، شامل دسته های مختلفی می شود.

با کلیک بر روی هر نماد، یک رابط بصری ظاهر می‌شود که تغییرات مختلفی را امکان‌پذیر می‌کند و حتی آن‌ها را در کد اعمال می‌کند - برخلاف React Icons، که باید این کار را به صورت دستی انجام دهید.

از Font Awesome" loading="lazy">

به طور کلی، Font Awesome نه تنها یک کتابخانه آیکون React عالی است، بلکه یکی از بهترین کتابخانه‌های آیکون است که توسعه‌دهندگان با پیشینه‌های مختلف و همچنین طراحان را در خود جای می‌دهد. اگر React Icons مطابق سلیقه شما نبود، ممکن است یک طرح پولی برای Font Awesome این کار را انجام دهد. قبل از خرید، می توانید برای طرح رایگان ثبت نام کنید تا ببینید آیا ارتقا تجربه شما را افزایش می دهد یا خیر.

3. آیکون پارک

IconPark یک کتابخانه آیکون منبع باز است که بیش از 2500 آیکون قابل تنظیم را برای مهندسان و طراحان به طور یکسان ارائه می دهد. نمادهای آن طراحی منحصر به فرد و در عین حال مدرنی دارند و امکان استفاده از سناریوهای انعطاف پذیر را فراهم می کنند.

اگر می‌خواهید این کار را انجام دهید، از ادغام یکپارچه React و Vue و همچنین پشتیبانی از SVG پشتیبانی می‌کند. انجام تغییرات در IconPark بسیار آسان است - حتی برای یک توسعه دهنده، همانطور که در تصویر بالا نشان داده شده است. همه تغییرات در کد قابل کپی منعکس می شود که آماده پیاده سازی در پروژه شما است.

در حال حاضر، نزدیک به 8k ستاره GitHub را در خود جای داده است، اما فعلاً فقط 3k بارگیری هفتگی npm دارد. اگر می خواهید آن را ببینید، راهنمای دقیق نصب آن در مستندات آن ذکر شده است.

4. CoreUI React Icons

CoreUI به‌خاطر قالب‌های داشبورد مدیریت منبع باز شناخته شده است، اما کتابخانه آیکون‌های React را هم اکنون شامل بیش از 1500 آیکون ارائه می‌کند. اگرچه کدهای قابل کپی آماده ارائه نمی دهد، اگر در حال ساخت داشبورد مدیریت هستید، ممکن است بخواهید آن را امتحان کنید.

یکی از نکات مهم در مورد این بسته، تاکید آن بر دسترسی افراد دارای اختلالات بینایی است. رویکردی برای تقسیم نمادها به نمادهای معنایی و نمادهای تزئینی و شامل یک خط کد است که به خوانندگان صفحه نمایش سیگنال می دهد که آن را نادیده بگیرند یا نه. جزئیات بیشتر در مورد این پیاده سازی و همچنین نصب کل بسته را می توان در مستندات آن یافت.

5. نمادهای بخش همیشه سبز

Evergreen Segment یک چارچوب React UI است که از اجزای متعدد React تشکیل شده است که خارج از جعبه کار می کنند. یکی از این مولفه‌ها آیکون‌های سفارشی طراحی شده آن است. Evergreen Segment بیش از 500 نماد با سبک منحصر به فرد را ارائه می دهد که ممکن است متناسب با نیازهای شما باشد.

اگرچه نمادهای برند را شامل نمی‌شود، اما نمادهای آن برای عملکردهای اولیه نباید حذف شوند. در حال حاضر بیش از 12 هزار ستاره GitHub را در خود جای داده است، اما آنها بیشتر به لطف موفقیت چارچوب اصلی آن هستند. با این حال، بسته npm برای نمادهای آن تا کنون بیش از 10 هزار بار در هفته بارگیری می کند و احتمالاً از اینجا افزایش می یابد.

دستورالعمل نصب و استفاده را می توان در اسناد آن یافت. جالب اینجاست که شامل یک ویرایشگر زنده روی نمونه‌ها نیز می‌شود، پس می‌توانید تأثیر اعمال props را روی آیکون‌ها ببینید.

نتیجه

از آنجایی که React Icons شامل بسیاری از کتابخانه‌های محبوب React است، به طور فعال نگهداری می‌شود و استفاده از آن آسان است، احتمالاً بهترین انتخاب برای شما به عنوان یک توسعه‌دهنده React خواهد بود. زرادخانه بزرگ مجموعه آیکون های آن برای مقابله با هر موردی که ممکن است نیاز داشته باشید کافی است.

اما اگر طرفدار آن نیستید، Material Icons یا Font Awesome MUI یک کتابخانه آیکون های همه جانبه عالی هستند. کتابخانه‌های Icon Park، CoreUI و Evergreen Segment ممکن است در مواردی که کتابخانه‌های استاندارد شما کار نمی‌کنند به شما کمک کنند.

با این وجود، کتابخانه‌های آیکون React منبع باز نسبت به پیاده‌سازی‌های گذشته یک موهبت و یک پیشرفت عظیم هستند – جایی که مجبور بودید مجموعه بزرگی از آیکون‌ها را دانلود کنید، برای کتابخانه‌های متعدد هزینه کنید، فقط آیکون مورد نیاز خود را پیدا نکنید.

خبرکاو