Sabtu, 01 July 2023

    Bootstrap Icon dengan React

    Dalam artikel ini kita akan belajar menggunakan bootstrap icons di dalam react.

    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

    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.

    src/components/icons.jsx
    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.

    src/App.tsx
    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 https://twitter.com/irsyadadl. Saya irsyad, see you soon.

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang