کتابخانه React-Icons در ری اکت ( 45 هزار عدد آیکن در ریکت ! )
کتابخانه React Icons به ما اجازه میده تا بصورت رایگان به بیش از 45 هزار آیکن دسترسی داشته باشیم و بتونیم توی پروژه های ری اکتی خودمون ازشون استفاده کنیم.
پس اگه React Developer هستید و میخواید توی پروژتون از آیکن استفاده کنید، این مقاله رو مطالعه کنید تا ببینیم مزایا و معایب کتابخانه react-icons چیه 🙂
بیش از 2 میلیون دانلود هفتگی در npm !
بیش از 45 هزار عدد آیکن رایگان و بهینه !
داستان چیه ؟
یکی از بهترین راه های بهبود تجربه کاربری ( UX ) استفاده و نمایش آیکن ها در وبسایت هست. چراکه دیدن آیکن ها در صفحات وب، حس خوبی به کاربر منتقل میکنه.
جدای از این موضوع، برای نمایش برخی موارد ما نیاز به آیکن ها داریم و نمیتونیم از متن استفاده کنیم، مثل آیکن سبد خرید ( خیلی جالب نیست که سبد خرید رو با متن نمایش بدیم، بهتره از آیکن سبد خرید استفاده کنیم )
زمانیکه ما از کتابخانه ری اکت استفاده میکنیم، کتابخانه ها و انتخاب های خیلی زیادی برای نمایش آیکن در ریکت داریم! اما از بین این همه کتابخانه، کدوم رو انتخاب کنیم؟
از طرفی شاید ما به چند آیکن در چند کتابخانه مختلف نیاز داشته باشیم، راه حل چیه که بتونیم بدون نصب چند کتابخانه، به اون آیکنها دسترسی داشته باشیم ؟
راه حل کتابخانه react-icons هست که از محوبیت و جامعه آماری خیلی خوبی برخورداره و کاملا رایگانه!
کتابخانه React Icons چیست ؟
کتابخانه React Icons از هزاران آیکن زیبا و حرفه ای تشکیل شده که به ما اجازه میده در پروژه React خودمون آیکن دلخواه خودمون رو نمایش بدیم.
مزیت کتابخانه react-icons این هست که صرفا حجم آیکن فراخوانی شده رو به پروژه اضافه میکنه ( نه حجم کل آیکن های فراخوانی شده و نشده )
همین موضوع باعث میشه که پروژه ما بهینه باشه و حجم نهایی وبسایت سنگین نشه!
اما یک نکته جالب ..
کتابخانه React Icons از چه آیکن هایی تشکیل شده ؟
ما گفتیم که این کتابخانه از هزاران آیکن تشکیل شده. اما این آیکن ها از کجا اومدن ؟
آیکن های کتابخانه react icons از چندین کتابخانه گرفته شدن. در واقع نیازی نیست که ما تک تک این کتابخانه هارو نصب کنیم تا بتونیم به آیکن های اونها دسترسی داشته باشیم.
صرفا با نصب کتابخانه react-icons در ری اکت میتونیم به آیکن های تمامی این کتابخانه ها دسترسی داشته باشیم.
این کتابخانه ها عبارتند از :
کتابخانه Ant Design Icons
( با 789 آیکن )
کتابخانه Bootstrap Icons
( با 2716 آیکن )
کتابخانه BoxIcons
( با 1634 آیکن )
کتابخانه Circm Icons
( با 288 آیکن )
کتابخانه css.gg
( با 704 آیکن )
کتابخانه Devicons
( با 192 آیکن )
کتابخانه Feather
( با 287 آیکن )
کتابخانه Flat Color Icons
( با 329 آیکن )
کتابخانه Font Awesome 5
( با 1611 آیکن )
کتابخانه Font Awesome 6
( با 2024 آیکن )
کتابخانه Game Icons
( با 4040 آیکن )
کتابخانه Github Octicons Icons
( با 264 آیکن )
کتابخانه IcoMoon Free
( با 491 آیکن )
کتابخانه Heroicons 2
( با 876 آیکن )
کتابخانه Heroicons
( با 460 آیکن )
کتابخانه Grommet-Icons
( با 635 آیکن )
کتابخانه Lucide
( با 1215 آیکن )
کتابخانه Ionicons 5
( با 1332 آیکن )
کتابخانه Ionicons 4
( با 696 آیکن )
کتابخانه Icons8 Line Awesome
( با 1544 آیکن )
کتابخانه Remix Icons
( با 2537 آیکن )
کتابخانه Radix Icons
( با 318 آیکن )
کتابخانه Phosphor icons
( با 7488 آیکن )
کتابخانه Material Design icons
( با 4341 آیکن )
کتابخانه Themify Icons
( با 352 آیکن )
کتابخانه Tabler ICons
( با 4836 آیکن )
کتابخانه Simple Line Icons
( با 189 آیکن )
کتابخانه Simple Icons
( با 2753 آیکن )
کتابخانه Typicons
( با 336 آیکن )
کتابخانه Weather ICons
( با 219 آیکن )
کتابخانه VS Code ICons
( با 439 آیکن )
و . . .
نیازی نیست هرکدوم از کتابخانه های بالارو بصورت جداگانه نصب کنیم!
گاهی اوغات پیش میاد که ما به 2 آیکن در 2 کتابخانه متخلف نیاز پیدا میکنیم و باید هر 2 کتابخانه رو نصب کنیم. دیگه نیازی به این کار نیست.
صرفا با نصب کتابخانه React Icons در ری اکت، میتونیم به آیکن های تمامی کتابخانه های آیکن دسترسی داشته باشیم.
کتابخانه React Icons جامعه آماری خوبی داره ؟
بله! با مراجعه به صفحه npm این کتابخانه میتونیم ببینیم که این کتابخانه حدود 2 میلیون دانلود هفتگی داره و تقریبا هر ماه داره بروزرسانی میشه.
کتابخانه react-icons از تایپ اسکریپت پشتیبانی میکنه ؟
خوشبختانه بله.
اگه پروژه ی تایپ اسکریپتی دارید، میتونید بدون نگرانی از کتابخانه React Icons استفاده کنید.
خب حالا بریم ببینیم چطور باید از این کتابخانه استفاده کنیم 🙂
نصب کتابخانه react-icons در ری اکت
با اجرای دستور زیر در ترمینال، میتونیم این کتابخانه رو به پروژه ری اکتی خودمون اضافه کنیم :
npm install react-icons
بعد چند لحظه این کتابخانه برای ما نصب میشه و میتونیم به تمامی آیکن های react-icons دسترسی داشته باشیم.
با مراجعه به این لینک میتونیم تمامی آیکن های React Icons رو ببینیم یا در کادر جستجوی سمت چپ، آیکن مورد نیاز خودمون رو جستجو کنیم.
تو تصویر زیر، من عبارت Phone رو جستجو کردم و تمامی نتایج به من نمایش داده شده :
با کلیک روی آیکن دلخواه، تیکه کد فراخوانی آیکن + روش استفاده همان آیکن در ری اکت به ما نمایش داده میشه:
طبق تصویر بالا، برای فراخوانی آیکن باید از تیکه کد زیر استفاده کنیم :
import { CiHeadphones } from "react-icons/ci";
و برای استفاده از این آیکن باید از تیکه کد زیر تو کامپوننت خودمون استفاده کنیم :
<CiHeadphones />
چطور آیکن های React Icons را در کامپوننت خودمون نمایش بدیم ؟
فراخوانی و نمایش آکن های React Icons در ریکت خیلی سادس! تو تیکه کد زیر ما 3 آیکن فراخوانی کردیم و توی کامپوننت خودمون نمایش دادیم :
import { FcIpad, FcElectronics, FcCalculator } from "react-icons/fc";
const App = () => {
return (
<div>
<h1> محصولات: </h1>
<ul>
<li>
An iPad <FcIpad />{" "}
</li>
<li>
AMD's new CPU <FcElectronics />
</li>
<li>
Calculator for my exam <FcCalculator />
</li>
</ul>
</div>
);
}
export default App;
تو تیکه کد بالا 3 آیکن از کتابخانه react-icons فراخوانی کردیم و نمایش دادیم.
حالا شاید سوال پیش بیاد که چطور آیکن های قابل کلیک بسازیم ؟
آیکن های قابل کلیک ( clickable )
خود آیکن های react-icons این قابلیت رو دارن که onClick از ما بگیرن، اما تو مثال زیر ما از تگ a و button استفاده کردیم تا زمانیکه روی آیکن ها کلیک کردیم، یک اتفاقی بیوفته ( ریدایرکت، اجرا شدن تابع و .. ) :
import { FaGoogle, FaRegSun } from "react-icons/fa";
export default function SimpleButton() {
return (
<div>
<p>ورود به سایت با گوگل</p>
<a href="/auth/google" data-wpel-link="internal">
<FaGoogle />
</a>
<br />
<button onClick={() => alert("Settings page")}>
<FaRegSun />
</button>
</div>
);
}
نمایش شرطی آیکن در React Icons چطوریه ؟
ما میتونیم آیکن های خودمون رو بصورت شرطی به کاربر نمایش بدیم ( Conditional Rendering )
در حقیقت یک شرط رو بررسی میکنیم و بر اساس نتیجه درست یا غلط اون شرط، یک آیکن مناسب به کاربر نمایش میدیم.
تو تیکه کد زیر یک شرط boolean رو بررسی کردیم و درصورت درست بودن نتیجه یک لوگو، و درصورت غلط بودن نتیجه یک لوگوی دیگر به کاربر نمایش دادیم :
import { FcAndroidOs } from "react-icons/fc";
export default function ConditionalRendering() {
const usesAndroid = true;
return (
<div>
{usesAndroid ? (
<p>
من کاربر <FcAndroidOs /> هستم
</p>
) : (
<p> من از اندروید استفاده نمیکنم </p>
)}
</div>
);
}
تغییر رنگ آیکن ها در کتابخانه react-icons
ما میتونیم رنگ تمام آیکن های خودمون رو تغییر بدیم. جدای از اینکه میتونیم به هر آیکن استایل و رنگ بدیم ( در زمان استفاده ) میتونیم یکبار برای همیشه رنگ تمامی آیکن های خودمون رو تغییر بدیم.
تو تیکه کد زیر ما از IconContext استفاده کردیم تا رنگ تمامی آیکن های پروژه رو تغییر بدیم :
import { IconContext } from "react-icons";
export default function ConfigIcon({ children }) {
return (
<>
<IconContext.Provider value={{ color: "green" }}>
{children}
</IconContext.Provider>
</>
);
}
به کمک تیکه کد بالا، رنگ تمامی آیکن های کتابخانه react-icons در ری اکت به سبز تغییر پیدا میکنه.
ما همچنین میتونیم سایز آیکن های پروژه خودمون رو تغییر بدیم :
return (
<>
<IconContext.Provider value={{ color: "green", size: "2em" }}>
{children}
</IconContext.Provider>
</>
);
دقت کنید که به کمک IconContext میتونیم استایل تمامی آیکن های کتابخانه react-icons رو تغییر بدیم، درصورتیکه نیاز به تغییر رنگ یا سایز یک آیکن رو داریم، میتونیم فقط به همون آیکن استایل ( style ) بدیم.
جمع بندی
کتابخانه React Icons در ری اکت یکی از محبوب ترین، کاملترین و بهینه ترین کتابخانه آیکن در React به حساب میاد.
به کمک این کتابخانه میتونیم به هزاران آیکن متنوع، رایگان و بهینه دسترسی داشته باشیم 🙂
کتابخانه react-icons جامعه آماری فوق العاده ای داره ( حدود 2 میلیون دانلود هفتگی ) و روز به روز به تعداد آیکن های این کتابخانه افزوده میشه..
اگه React Developer هستید، پیشنهاد میکنم از کتابخانه react-icons استفاده کنید چون هم آیکن های خیلی خیلی متنوعی داره، هم رایگانه و هم کاملا بهینس !
کتابخانه react-icons شامل بیش از 45 هزار عدد آیکن زیبا، بهینه و متنوع هست که در اپیکیشن های React به ما در نمایش آیکن کمک میکند. آیکن های خود این کتابخانه از سایر کتابخانه های آیکن هستند ( یعنی نیازی نیست سایر کتابخانه های آیکن رو نصب کنیم، با نصب React Icons میتونیم به آیکن های تمامی کتابخانه های آیکن در ریکت دسترسی داشته باشیم )
بله! این کتابخانه بیش از 2 میلیون دانلود هفتگی در npm داره.
به کمک دستور زیر :
npm install react-icons
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
بهترین کتابخانه آیکن در ری اکت همین React Icons هست ..
سلام و درود
ممنون از نظرت 🙂
خیلی عالی ممنون
قرباانت 🙂 خوشحالم که برات مفید واقع شده