Kustomisasi

Warna, lencana, ukuran, dan gerakan ikon diatur melalui prop dan properti kustom CSS.

Warna

Semua warna ikon dihitung dari satu warna aksen. Secara default aksennya adalah currentColor, sehingga Anda dapat mengubahnya dengan menyetel properti CSS color pada ikon atau pada elemen induk mana pun:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

Warna dihitung dengan color-mix() CSS, sehingga transisi pada color memudarkan semua gradien secara bersamaan:

css

.kubai-icon { transition: color .3s ease; }

Lencana

Ikon berlencana, seperti folder-plus atau user-check, memiliki lencana di salah satu sudut. Secara default lencana berupa cakram gelap dengan glif putih. badgeColor mengubah warna cakram. badgeColor="semantic" memilih warna yang sesuai untuk tiap lencana: hijau untuk tambah dan selesai, merah untuk hapus dan batal, kuning untuk peringatan.

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

Properti kustom CSS

Setel ini pada ikon atau elemen induk mana pun untuk menimpa nada tertentu. Tanda adalah garis dan simbol yang digambar pada ikon.

Properti	Kontrol
`--ki-c`	Warna dasar untuk gradien dan tanda terang. Default: `currentColor`.
`--ki-e`	Warna dasar untuk garis tepi dan tanda gelap. Default: `--ki-c`.
`--ki-w`	Warna tanda yang secara default berwarna putih.
`--ki-b`	Warna cakram lencana. Default: abu-abu gelap netral.
`--ki-l`	Seberapa jauh isian solid yang besar memudar menjadi putih ke arah atas, dari 0% hingga 100%.

variant="soft" mengatur semua ini kecuali --ki-b.

Atur varian untuk seluruh halaman

Varian diwariskan, seperti color. Setel pada elemen mana pun, dan setiap ikon di dalamnya mengikutinya kecuali ikon itu punya variant sendiri. Pengaturan yang lebih dekat selalu menang: prop ikon itu sendiri, lalu elemen terdekat, lalu color default.

tsx

import { Folder, VARIANTS } from "kubai-icons-react";

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

Objek yang sama berfungsi di Vue dengan :style. Tanpa framework, panggil setVariant:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

File SVG statis sudah memuat warnanya, jadi pilih varian lewat folder: svg/ atau svg-soft/.

Ukuran

Atur ukuran dengan prop size. Pada 24px ke bawah, pakai ikon dasar alih-alih ikon berlencana, karena lencana tidak punya cukup ruang. Kanvas dijelaskan di Bahasa desain.

Gerakan

Setiap gerakan berjalan selama 460ms dengan cubic-bezier(.22, 1, .36, 1) dan dimulai dari posisi ikon saat itu, sehingga dapat berbalik di tengah jalan. Saat prefers-reduced-motion aktif, ikon langsung berpindah ke pose akhir tanpa animasi.