Özelleştirme

Simge rengi, rozetler, boyut ve hareket, prop'lar ve CSS özel özellikleri üzerinden ayarlanır.

Renk

Bir simgenin tüm renkleri tek bir vurgu renginden hesaplanır. Varsayılan olarak vurgu currentColor değeridir; bu yüzden simgede veya herhangi bir üst öğede CSS color özelliğini ayarlayarak değiştirebilirsiniz:

html

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

Renkler CSS color-mix() ile hesaplanır; bu yüzden color üzerindeki bir geçiş tüm gradyanları çapraz geçişle değiştirir:

css

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

Rozetler

folder-plus veya user-check gibi rozetli bir simgenin bir köşesinde rozet bulunur. Rozet varsayılan olarak beyaz glifli koyu bir disktir. badgeColor diskin rengini değiştirir. badgeColor="semantic" her rozete uygun bir renk seçer: ekleme ve tamamlama için yeşil, kaldırma ve iptal için kırmızı, uyarılar için kehribar.

tsx

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

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

CSS özel özellikleri

Tek tek tonları geçersiz kılmak için bunları bir simgede ya da herhangi bir üst öğede ayarlayın. İşaretler, bir simge üzerine çizilen çizgiler ve sembollerdir.

Özellik	Kontroller
`--ki-c`	Gradyanlar ve açık işaretler için temel renk. Varsayılan: `currentColor`.
`--ki-e`	Dış çizgiler ve koyu işaretler için temel renk. Varsayılan: `--ki-c`.
`--ki-w`	Varsayılan olarak beyaz olan işaretlerin rengi.
`--ki-b`	Rozet diskinin rengi. Varsayılan: nötr koyu gri.
`--ki-l`	Büyük düz dolguların üste doğru ne kadar beyaza solacağı, %0 ile %100 arasında.

variant="soft", --ki-b dışındaki bunların tümünü ayarlar.

Varyantı tüm sayfa için ayarlama

Varyant, color gibi devralınır. Bunu herhangi bir öğeye ayarlayın; kendi variant değeri olmayan içindeki tüm simgeler onu izler. Daha yakın ayar her zaman önceliklidir: önce simgenin kendi prop'u, sonra en yakın öğe, sonra varsayılan color.

tsx

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

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

Aynı nesne Vue'da :style ile çalışır. Framework olmadan setVariant işlevini çağırın:

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

setVariant(document.documentElement, "soft");

Statik SVG dosyalarında renkler dosyaya yazılıdır; bu yüzden varyantı klasörle seçin: svg/ veya svg-soft/.

Boyut

Boyutu size prop'uyla ayarlayın. 24 px ve altında, rozete az yer kaldığında, rozetli simgeler yerine temel simgeleri kullanın. Tuval Tasarım dili sayfasında anlatılır.

Hareket

Her hareket cubic-bezier(.22, 1, .36, 1) eğrisiyle 460 ms sürer ve simgenin o anki konumundan başlar; bu yüzden yarıda geri dönebilir. prefers-reduced-motion ayarlıysa simgeler animasyon olmadan doğrudan bitiş pozuna geçer.