Kamis, 07 December 2023

    Paranoid: Ikon untuk React.js yang Elegan Untuk Project Anda

    Pelajari bagaimana mengintegrasikan koleksi ikon React yang unik dan menarik dari @irsyadadl/paranoid ke dalam proyek Anda.

    Paranoid

    Dalam artikel saya akan memperkenalkan icon yang baru saja buat yang terkusus untuk react project. Package ini telah diterbitkan di npmjs dan github package. Sehingga Anda bisa leluasa menggunakan package manager yang Anda inginkan seperti npm, bun, yarn, pnpm ataupun yang lain yang Anda punya.

    Instalasi

    Saat ini, versi nya masih (v0.1.0), dan ini akan terus diperbarui sesuai penambahan icon yang akan dilakukan terus menerus. Untuk instalasinya sangat mudah, pastikan Anda sudah punya react project mau itu laravel inertia react, next.js, atau pun scaffolding react atau vite.

    npm i @irsyadadl/paranoid
    
    pnpm i @irsyadadl/paranoid
    
    yarn add @irsyadadl/paranoid
    
    bun add @irsyadadl/paranoid
    

    Setelah itu, maka sekarang tinggal menggunakanya.

    Usage

    Untuk menggunakannya tentu sangat mudah sekali, kita hanya perlu import icon ini seperti layaknya komponen react.

    import { IconCheck, IconHome  } from '@irsyadadl/paranoid';
    
    export default function App() {
        return (
            <div>
                <IconCheck/>
                
                {/* with tailwindcss */}
                <IconHome className='w-5 h-5'/> 
            </div>
        )
    }
    

    Size

    Untuk size default nya ini adalah 24x24. Jika Anda menggunakan tailwind css. Tentu ini akan sangat mudah dilakukan dengan hanya memberi className seperti:

    import { IconHome  } from '@irsyadadl/paranoid';
    
    <IconHome className='w-5 h-5'/>
    

    Pewarnaan

    Jika Anda ingin memberi warna, tentu itu sangat mudah.

    import { IconBag  } from '@irsyadadl/paranoid';
    
    <IconBag color='red' />
    

    Atau jika Anda menggunakan tailwind css, Anda tentu bisa membuat warna jauh lebih mudah.

    import { IconBag  } from '@irsyadadl/paranoid';
    
    <IconBag className="w-6 h-6 text-blue-500 fill-blue-500/10" />
    

    Karena icon ini berlaku untuk 2 bagian yaitu outline dan solid. Jadi untuk fill teknik, akan sangat berguna untuk outline.

    Solid

    Icon ini by default adalah outline, namun jika Anda ingin solid, Anda hanya perlu menambahkan Fill setelah nama icon nya. Seperti misalnya

    import { IconPlaylistFill  } from '@irsyadadl/paranoid';
    
    <IconPlaylistFill/>
    

    Namun, tidak semua icon mempunyai tipe solid. Sehingga jika Anda ingin melihatnya, silakan langsung saja lihat atau cari di irsyad.co/paranoid.

    Open Source

    Icon ini open source, jadi Anda bisa lihat di npmjs atau github package. Atau langsung kunjungi official site nya.

    Kesimpulan

    Artikel ini akan memberikan panduan tentang bagaimana mengintegrasikan koleksi ikon elegan dari @irsyadadl/paranoid ke dalam proyek React Anda. Dengan langkah-langkah mudah dan contoh kode yang praktis.

    Semoga icon dan artikel ini bermanfaat. Saya Irsyad dan sampai jumpa di artikel selanjutnya.

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