‏react-icons؛ گنجینهٔ آیکون‌های محبوب برای ری‌اکت

react-icons یه کتابخونهٔ آیکون برای ری‌اکته که به جای این‌که مجبور باشی برای هر ست آیکون یه پکیج جدا نصب کنی، ده‌ها مجموعهٔ معروف رو زیر یه سقف جمع کرده. تو مستندش اومده که هدف اصلی این بوده که اضافه‌کردن آیکون‌ها به پروژه تا حد ممکن ساده بشه.

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

طرز استفاده‌ش هم خیلی سرراسته؛ اسم آیکون رو از مسیر مجموعه‌ش می‌گیری و مثل یه کامپوننت معمولی ری‌اکت ازش استفاده می‌کنی:

import { FaBeer } from 'react-icons/fa';

function Question() {
  return <h3>Lets go for a <FaBeer />?</h3>;
}

طیف مجموعه‌هایی که پوشش می‌ده خیلی گسترده‌ست: از Font Awesome (نسخهٔ ۵ و ۶)، Material Design و Lucide بگیر تا Bootstrap Icons، Heroicons، Phosphor، Tabler و کلی ست دیگه. بعضی از این مجموعه‌ها به‌تنهایی چند هزار آیکون دارن، پس عملاً برای اکثر نیازهای رابط کاربری چیزی کم نمیاری.

برای پروژه‌های بزرگ‌تر مثل MeteorJS یا GatsbyJS هم یه پکیج جداگونه به اسم @react-icons/all-files گذاشته که آیکون‌ها رو تک‌فایلی ایمپورت می‌کنه؛ فقط عیبش اینه که نصبش کندتره.

نکات کلیدی:

• یه کتابخونهٔ واحد که آیکون‌های ده‌ها مجموعهٔ محبوب رو برای ری‌اکت جمع کرده
• با ایمپورت ES6 فقط آیکون‌های استفاده‌شده وارد باندل می‌شن و حجم خروجی کنترل می‌مونه
• مجموعه‌هایی مثل Font Awesome، Material، Lucide، Bootstrap و Phosphor با هزاران آیکون پشتیبانی می‌شن
• برای Meteor و Gatsby یه بستهٔ تک‌فایلی جدا وجود داره