Rabu, 24 August 2022

    Rekomendasi Icon Terbaik untuk Website Anda

    Dalam artikel ini saya akan memberi tahu beberapa icon untuk website di tahun 2022 ini. Masing-masing dari icon akan saya review dan akan saya beri nilai plus dan minus nya.

    Dalam artikel ini saya akan memberi tahu beberapa icon untuk website di tahun 2022 ini. Masing-masing dari icon akan saya review dan akan saya beri nilai plus dan minus nya.

    Heroicons

    Heroicons adalah icon yang dibuat oleh salah satu pendiri Tailwind CSS yaitu Steve Schoger, icon ini cukup elegan dan populer, banyak yang sudah memakai nya. Kebetulan pada saat saya menulis artikel ini, icon ini baru saja di perbarui menjadi v2.0.0 yang itu kurang lebih 260 icon di buat ulang oleh Steve. Tampilan nya cukup elegan, namun kurang lengkap. Seperti misalnya brand logo dari beberapa vendor seperti react, vue tidak ada di dalam heroicons ini. Tidak hanya itu, sosial media juga tidak ada.

    Untuk menggunakan icon ini, bisa langsung di copy dari official web nya, atau bisa di pakai menggunakan npm seperti:

    npm install @heroicons/react
    

    Untuk contoh penggunaannya bisa langsung di seperti:

    import { BeakerIcon } from '@heroicons/react/24/solid';
    
    function MyComponent() {
        return (
            <div>
                <BeakerIcon className='h-6 w-6 text-blue-500' />
                <p>...</p>
            </div>
        );
    }
    

    Heroicons

    Paranoid

    Paranoid adalah icon library yang di rancang oleh @irsyadadl, yang terbagi dalam 2 bagian, yaitu solid dan juga fill.

    Untuk menggunakan icon ini cukup mudah.

    Terminal
    npm i @irsyadadl/paranoid
    

    Anda bisa memilih antara outline dan juga solid.

    import { IconBag } from '@irsyadadl/paranoid';
    
    const App = () => {
      return <IconBag />;
    };
    
    export default App;
    
    import { IconBagFill } from '@irsyadadl/paranoid';
    
    const App = () => {
      return <IconBagFill />;
    };
    
    export default App;
    

    Dan jika Anda ingin menggunakan tailwind css, mudah saja tinggal hanya menambah class seperti:

    <IconBag className='w-5 h-5' />
    

    Bootstrap Icon

    Bagi yang sudah sering memakai bootstrap harusnya sudah tidak asing lagi dengan icon ini. Karena ini juga dibuat di official website dari bootstrap sendiri. Tampilan juga bagus, dan lumayan lengkap. Seperti brand sosial media, atau bahkan vendor seperti react, js, css sudah ada dalam icon ini.

    Untuk menggunakan icon ini sangat simple sekali. Bisa dengan menggunakan svg, atau bahkan menggunakan tag seperti <i>. Icon ini juga bisa di import ke project kita dengan menggunakan npm seperti:

    npm i bootstrap-icons
    

    Kemudian untuk menggunakannya sangat mudah sekali, cukup import css nya dan gunakan dengan tag <i/> seperti:

    import 'bootstrap-icons/font/bootstrap-icons.css'
    function MyComponent() {
        return (
            <div>
                <i class="bi bi-arrows-angle-expand"></i>
                <p>...</p>
            </div>
        );
    }
    

    Bootstrap Icon

    Tabler Icons

    Tabler Icons adalah icon yang dibuat oleh Paweł Kuna, yang mana tabler icons sendiri mempunyai kurang lebih 3200 icon yang sudah siap untuk di pakai, bahkan jika di banding jumlah dengan heroicons, icon ini jauh lebih unggul.

    Brand seperti sosial media dan juga vendor-vendor beberapa framework dan bahasa pemrograman juga sudah ada di dalam icon ini. Bahkan parsinta sendiri menggunakan icons ini, kenapa ? Ya karena ini adalah salah satu icon favorit saya untuk saat ini. Tabler icons

    Untuk menggunakan icon nya cukup mudah, bisa dengan langsung mengkopi dari official site nya, atau juga bisa di import ke project kita melalui npm seperti:

    npm install @tabler/icons-react --save
    

    Untuk menggunakan bisa dengan berbagai macam cara, bisa dengan image seperti:

    <img src="path/to/icon.svg" alt="icon title" />
    

    Atau bisa juga dengan css seperti:

    .icon-tabler {
        color: red;
        width: 32px;
        height: 32px;
        stroke-width: 1.25;
    }
    

    Atau bahkan dengan component react seperti:

    import { IconAward } from '@tabler/icons-react';
    
    const MyComponent = () => {
        return (
            <IconAward
                size={36}
                color='red'
                stroke={3}
                strokeLinejoin='miter'
            />
        );
    };
    

    Semoga artikel ini dapat bermanfaat untuk Anda, dan saya Irsyad. Until next time 👋🏻

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

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Follow me on
    Support me
    SaweriaGithub