React

kubai-icons-react her simgeyi bir React bileşeni olarak sunar. React 18 veya üstünü gerektirir.

Kurulum

bash

npm install kubai-icons-react

Kullanım

Bir simgeyi ada göre içe aktarın ve bileşen olarak oluşturun:

tsx

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

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

Prop'lar

Prop	Varsayılan	Açıklama
`size`	24	Piksel cinsinden genişlik ve yükseklik.
`color`	currentColor	Tüm gradyanların, dış çizgilerin ve işaretlerin türetildiği vurgu rengi. Bkz. Özelleştirme.
`variant`	devralınır, yoksa "color"	`"soft"` daha açık dolgular ve daha koyu dış çizgiler kullanır, beyaz işaretleri koyu tonda çizer.
`badgeColor`	koyu gri	Rozet diskinin rengi: herhangi bir CSS rengi ya da her rozete uygun bir renk için `"semantic"`; örneğin ekleme için yeşil, kaldırma için kırmızı, uyarı için kehribar.
`trigger`	"hover"	`"hover"`, simge üzerine gelindiğinde veya klavye odağı aldığında hareketi oynatır. `"parent"` aynısını `data-kubai-trigger` içeren en yakın üst öğe için yapar; böyle bir öğe yoksa doğrudan üst öğe için yapar. `"none"` hiçbir dinleyici eklemez, bu yüzden hareketi yalnızca `hover` prop'u oynatır.
`hover`	Yok	`true` hareketi oynatır, `false` geri alır. Tam denetim için `trigger="none"` ile birlikte kullanın.
`active`, `defaultActive`, `onActiveChange`	Yok	Tıklandığında veya dokunulduğunda iki durum arasında geçiş yapan düğme tipi simgelerin açık/kapalı durumu. `Bookmark` bir örnektir.
`title`	Yok	Erişilebilir ad. Olmadan simge `aria-hidden` olur. Bkz. Erişilebilirlik.

className, style, olay işleyicileri ve ref gibi diğer SVG prop'ları <svg> öğesine aktarılır.

Üst öğeden tetikleme

Düğmenin tamamı üzerine gelindiğinde veya klavye odağı aldığında hareketi oynatmak için düğmeye data-kubai-trigger, simgeye trigger="parent" ekleyin:

tsx

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

Ada göre simgeler

Simge adı yalnızca çalışma zamanında biliniyorsa (örneğin bir API'den gelen bir değer), DynamicIcon kullanın. Her simge yine ayrı bir parçadır (chunk); bu yüzden paket tüm seti içermez.

tsx

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

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

Sunucuda oluşturma

Simgeler Next.js Server Component'lerinde ve Client Component'lerinde yapılandırma gerektirmeden çalışır. İşaretleme sunucuda oluşturulur, hareket hydration sırasında eklenir. DynamicIcon bunun istisnasıdır: sunucuda boş bir yer tutucu oluşturur ve simgeyi tarayıcıda yükler.

Derin içe aktarmalar

Bir geliştirme sunucusunda paket dizininin yüklenmesini önlemek için simgeyi kendi dosyasından içe aktarın. Bkz. Performans.

tsx

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