آموزش استفاده از آیکون های React در Next JS

آموزش استفاده از آیکون های React در Next JS

آیکون ها بخش بزرگی از اکثر وب سایت ها/برنامه ها هستند. بنابراین بیایید نگاهی به نحوه استفاده از  آیکون های React در پروژه Next.js بیندازیم.

آیکون های React  یکی از محبوب‌ترین کتابخانه‌های آیکون برای پروژه‌های مبتنی بر React است. از واردات ES6 استفاده می کند به این معنی که ما فقط آیکون هایی را که استفاده می کنیم بارگذاری می کنیم!

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

[adrotate banner=”3″]

بارگذاری آیکون های React  در Next JS

ابتدا باید با اجرای دستور زیر در پوشه پروژه خود بسته را به پروژه خود اضافه کنیم :

npm i react-icons

سپس می توانیم با وارد کردن آیکون ها شروع کنیم.

به وب سایت React icons بروید و ایکونی را که می خواهید استفاده کنید، پیدا کنید (از نوار جستجوی سمت چپ استفاده کنید).

سپس ان را به مولفه ای که میخواهیم آیکون داشته باشد، به این صورت وارد میکنیم:

import { BsGrid3X3GapFill } from 'react-icons/bs';

<button>
  <BsGrid3X3GapFill />
</button>;

بیایید از آن استفاده کنیم و  شبکه/لیست مشاهده ی toggle  را که ایجاد کردیم تغییر دهیم.

[adrotate banner=”3″]

بارگذاری بیش از یک آیکون React  در Next JS

ما به دو آیکون نیاز داریم: یک شبکه و یک آیکون لیست. من هر دو را از یک مجموعه آیکون (بوت استرپ) انتخاب کرده ام.

بیایید هر دو را بارگیری کنیم:

import { BsGrid3X3GapFill, BsList } from 'react-icons/bs';

و سپس، به جای متن ساده ای که داشتیم، بیایید آن را به آیکون های خود تغییر دهیم:

<div className='flex justify-end p-5'>
  <button
    className='px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700'
    onClick={() => setToggleViewMode(!toggleViewMode)}
  >
    {toggleViewMode ? <BsGrid3X3GapFill /> : <BsList />}
  </button>
</div>

تمام! اکنون ایکون های React خود را در یک برنامه Next.js تنظیم کرده ایم.

متشکریم که تا انتهای مقاله با ما همراه بودید. موفق باشید!