React

kubai-icons-react menyediakan setiap ikon sebagai komponen React. Memerlukan React 18 atau lebih baru.

Pasang

bash

npm install kubai-icons-react

Penggunaan

Impor ikon berdasarkan nama dan render sebagai komponen:

tsx

import { Calendar, Lock } from "kubai-icons-react";

export function Example() {
  return (
    <>
      <Calendar />
      <Lock size={32} color="#22C55E" variant="soft" title="Locked" />
    </>
  );
}

Prop

Prop	Default	Deskripsi
`size`	24	Lebar dan tinggi dalam piksel.
`color`	currentColor	Warna aksen yang menjadi dasar semua gradien, garis tepi, dan tanda. Lihat Kustomisasi.
`variant`	diwarisi, jika tidak "color"	`"soft"` memakai isian yang lebih terang dan garis tepi yang lebih gelap, serta menggambar tanda putih dengan nada gelap.
`badgeColor`	abu-abu gelap	Warna cakram lencana: warna CSS apa pun, atau `"semantic"` untuk warna yang sesuai untuk tiap lencana, seperti hijau untuk tambah, merah untuk hapus, dan kuning untuk peringatan.
`trigger`	"hover"	`"hover"` memutar gerakan saat ikon di-hover atau menerima fokus keyboard. `"parent"` melakukan hal yang sama untuk elemen induk terdekat yang memiliki `data-kubai-trigger`, atau untuk induk langsung jika tidak ada. `"none"` tidak menambahkan listener, sehingga hanya prop `hover` yang memutar gerakan.
`hover`	Tidak ada	`true` memutar gerakan dan `false` membaliknya. Gabungkan dengan `trigger="none"` untuk kendali penuh.
`active`, `defaultActive`, `onActiveChange`	Tidak ada	Status aktif/nonaktif untuk ikon toggle, yang berganti antara dua status saat diklik atau diketuk. `Bookmark` adalah salah satu contohnya.
`title`	Tidak ada	Nama aksesibel. Tanpa ini, ikon bersifat `aria-hidden`. Lihat Aksesibilitas.

Prop SVG lainnya, seperti className, style, event handler, dan ref, diteruskan ke <svg>.

Pemicu dari induk

Untuk memutar gerakan saat seluruh tombol di-hover atau menerima fokus keyboard, tambahkan data-kubai-trigger ke tombol dan trigger="parent" ke ikon:

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

Ikon berdasarkan nama

Jika nama ikon baru diketahui saat runtime, misalnya nilai dari API, gunakan DynamicIcon. Setiap ikon tetap berupa chunk terpisah, sehingga bundle tidak menyertakan seluruh set.

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

export function ItemIcon({ name }: { name: string }) {
  return <DynamicIcon name={name} size={20} />;
}

Render di server

Ikon berfungsi di Server Component dan Client Component Next.js tanpa konfigurasi. Markup dirender di server, dan gerakan ditambahkan saat hidrasi. DynamicIcon adalah pengecualian: komponen ini merender placeholder kosong di server dan memuat ikon di browser.

Impor langsung

Untuk menghindari pemuatan indeks paket di dev server, impor ikon dari filenya sendiri. Lihat Performa.

tsx

import Folder from "kubai-icons-react/icons/folder";