Icon Pack Lengkap dengan React Icons

Kesulitan menemukan icon yang kamu butuhkan untuk projectmu? ketika cari di google ada banyak jenis tipe icon yang memusingkan? ada yang .png ada yang .svg, terkadang size dan ukurannya tidak sama? Pada tutorial kali ini saya akan membantu kamu untuk menginstall react-icons, sebuah library yang mengumpulkan icon-icon pack populer yang memudahkan developer dalam penggunaan banyak jenis icon.

Step 1: Instalasi

npm install react-icons --save

npm install react-icons --save

Step 2: Cara Penggunaan

Cara penggunaannya cukup simple, kamu hanya perlu import icon pack yang dibutuhkan

page.jsx

import { AiFillFire } from "react-icons/ai";
 
const Page = () => {
  return (
    <h3>
      I'm on fire <AiFillFire />?
    </h3>
  );
};
 
export default Page;

import { AiFillFire } from "react-icons/ai";
 
const Page = () => {
  return (
    <h3>
      I'm on fire <AiFillFire />?
    </h3>
  );
};
 
export default Page;

Jika kamu membutuhkan jenis icon tertentu kamu dapat merubah import sesuai dengan jenis icon pack yang kamu butuhkan

// Ant Design Icon Pack
import { IconName } from "react-icons/ai";
 
// Boostrap Icon Pack
import { IconName } from "react-icons/ai";
 
// Font Awesome Icon Pack
import { IconName } from "react-icons/fa6";
 
// Heroicons Icon Pack
import { IconName } from "react-icons/hi2";
 
// Ionicons Icon Pack
import { IconName } from "react-icons/io";

// Ant Design Icon Pack
import { IconName } from "react-icons/ai";
 
// Boostrap Icon Pack
import { IconName } from "react-icons/ai";
 
// Font Awesome Icon Pack
import { IconName } from "react-icons/fa6";
 
// Heroicons Icon Pack
import { IconName } from "react-icons/hi2";
 
// Ionicons Icon Pack
import { IconName } from "react-icons/io";

Kamu juga dapat mengunjungi situs React Icons jika ingin melihat semua jenis icon pack yang disediakan.

Bagaimana, lengkap dan mudah bukan?