Dalam artikel ini kita akan belajar menggunakan bootstrap icon dengan reactjs.

Mungkin jika Anda sudah terbiasa menggunakan bootstrap, Anda sudah tidak asing lagi dengan bootstrap icon. Dan sayangnya, official dari bootstrap tidak menyediakan icon untuk reactjs. Jadi kita harus menggunakan library lain untuk menggunakan bootstrap icon di reactjs.

¶Terimkasih Untuk Pembuatnya

Dengan library react-bootstrap-icons yang telah dibuat oleh Ismamz kita dapat menggunakan bootstrap icon dengan mudah di dalam reactjs.

¶Instal Package

Pertama, kita harus menginstall react-bootstrap-icons terlebih dahulu. Untuk menginstallnya kita dapat menggunakan npm atau yarn.

# with npm
npm install react-bootstrap-icons

# with yarn
yarn add react-bootstrap-icons

¶Cara Menggunakan

Dan untuk menggunakan nya tentu ini sangat mudah, layaknya seperti icon-icon yang pernah Anda pakai tentunya. Bisa denga langsung mengimport icon yang ingin Anda gunakan.

import { TextRight } from 'react-bootstrap-icons';

export default function App() {
    return <TextRight />;
}

Atau jika Anda menggunakan tailwindcss, ini akan sangat mudah untuk di customize. Karena kita dapat menggunakan tailwindcss untuk mengubah warna, ukuran, dan lain-lain.

<TextRight className="text-lime-600 w-5 h-5" />;

¶Menggunakan Prefix

Jika Anda ingin menggunakan prefix, tentu ini juga sangat mudah. Karena saya juga menggunakan methode ini secara default. Kita dapat menggunakan prefix dengan cara seperti ini.

Pertama, Anda bisa membuat component dengan nama src/components/icons.tsx

import * as icons from 'react-bootstrap-icons';
import { IconProps } from 'react-bootstrap-icons';

interface Props extends IconProps {
    iconName: keyof typeof icons;
}

export const Icon = ({ iconName, ...props }: Props) => {
    const BootstrapIcon = icons[iconName];
    return <BootstrapIcon {...props} />;
}

¶Saya Tidak Pakai Typescript

Please do not worry, jika Anda tidak menggunakan typescript, Anda dapat menggunakan cara seperti ini.

import * as icons from 'react-bootstrap-icons';

export const Icon = ({ iconName, ...props }) => {
    const BootstrapIcon = icons[iconName];
    return <BootstrapIcon {...props} />;
}

Dan untuk menggunakannya, kita akan memanggil komponen Icon yang telah kita buat tadi.

import { Icon } from './components/icons';

export default function App() {
    return <Icon iconName="TextRight" />;
}

Dan karena kita sudah membagi props di dalam icons.tsx, jadi kita dapat menggunakan semua props yang ada di svg element seperti className, style, dan lain-lain.

<Icon iconName="TextRight" className="text-lime-600 w-5 h-5" />

¶Perlu Diketahui

Menggunakan bootstrap icon dengan tag <Icon/> itu memang sangat terlihat lebih enak dari pada kita harus mengimport icon satu persatu pada setiap komponen. Namun sayangnya, tidak semua yang enak-enak itu enak. Karena jika kita melakukan import * as icons, itu sama saja kita memasukkan semua icon ke dalam project yang jika di total lebih dari 3,029.12 kB dan kalau di compress ke dalamgzip bisa menjadi 337.07 kB.

Solusi yang pertama, Anda bisa menggunakan import satu persatu seperti yang saya contohkan pertama kali.

import { TextRight } from 'react-bootstrap-icons';

Atau jika Anda tetap ingin menggunakan teknik seperti yang kedua, maka pastikan Anda hanya mengimport icon yang Anda perlukan saja. Berikut contoh nya.

import clsx from 'clsx';

import { Alt, Archive, ArrowClockwise } from 'react-bootstrap-icons';

export const icons = {
    Alt,
    Archive,
    ArrowClockwise,
}

interface Props extends IconProps {
    iconName: keyof typeof icons;
    className?: string;
}

export const Icon = ({ iconName, className, ...props }: Props) => {
    const BootstrapIcon = icons[iconName];
    return <BootstrapIcon className={clsx('h-4 w-4 shrink-0 align-middle', className)} {...props} />;
};

Dengan begitu, kita tidak akan mendapatkan file yang besar, sehingga kita hanya memasukkan icon yang kita mau saja.

¶Kesimpulan

Sekian artikel kali ini, semoga bermanfaat. Jika ada pertanyaan, please shoot me on twitter. Saya Irsyad, see you soon.