Paranoid: Ikon untuk React.js yang Elegan Untuk Project 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 paranoid.irsyad.co.

¶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.