Instalasi badrian-icon

Koleksi ikon React ringan, konsisten, dan fleksibel untuk proyek modern seperti Next.js, Remix, atau Vite.

badrian-icon dibuat menggunakan monorepo, sehingga setiap paket ikon dikelola secara terpisah. Pendekatan ini membuat bundle lebih ringan bagi konsumen karena hanya paket yang digunakan yang akan diimpor. Semua ikon tersedia sebagai React components yang langsung menggunakan SVG, tanpa bergantung pada runtime tambahan.

Instalasi badrian-icon

Koleksi ikon React ringan, konsisten, dan fleksibel untuk proyek modern seperti Next.js, Remix, atau Vite.

Instalasi

Pilih salah satu metode instalasi

npm install badrian-icon
# atau
yarn add badrian-icon
# atau
pnpm add badrian-icon

Konfigurasi

Gunakan Tailwind CSS, tambahkan direktori badrian-icon ke dalam file tailwind.config.js:

npm install -D tailwindcss postcss autoprefixer

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/badrian-icon/**/*.js"
  ],
     safelist: [
    {
      pattern:
        /(bg|text|border)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|
        blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-(50|100
        |200|300|400|500|600|700|800|900|950)/,
    },
  ],
  theme: { extend: {} },
  plugins: [],
}

Cara Menggunakan

Import ikon langsung dari package:

import { Add, Trash } from "badrian-icon/kriston";
import { Edit  } from "badrian-icon/leonid";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Add className="w-6 h-6 text-green-600" />
      <Edit className="w-6 h-6 text-blue-600" />
      <Trash className="w-6 h-6 text-red-600" />
    </div>
  );
}

Kustomisasi

1️ Ukuran

<Add className="w-10 h-10" />

Warna

<Trash className="text-red-500" />

3️ Warna Kustom (tanpa Tailwind)

<Edit style={{ color: "#f59e0b", width: 32, height: 32 }} />

Penggunaan Dinamis

Render ikon berdasarkan nama secara dinamis:

import * as Icons from "badrian-icon";

export default function DynamicExample({ iconName = "Add" }) {
  const IconComponent = Icons[iconName];
  return <IconComponent className="w-8 h-8 text-blue-500" />;
}

Integrasi Next.js

"use client";
import { ArrowRight } from "badrian-icon";

export default function ButtonNext() {
  return (
    <button className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg">
      Next
      <ArrowRight className="w-5 h-5" />
    </button>
  );
}

Contoh Tambahan

Button dengan Ikon

import { Save } from "badrian-icon";

<button className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-md">
  <Save className="w-5 h-5" />
  Simpan
</button>

Input dengan Ikon

import { Search } from "badrian-icon";

<div className="flex items-center border rounded-md px-3 py-2">
  <Search className="w-5 h-5 text-gray-400" />
  <input type="text" placeholder="Cari ikon..." className="ml-2 outline-none" />
</div>

Lisensi

badrian-icon dirilis di bawah lisensi MIT — bebas digunakan untuk proyek pribadi maupun komersial.