Icon

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Icon } from '@bigbang/ui';

Kaynak

Icon.tsx

Storybook

Icon · Playground

Icon, @bigbang/ui paketindedir; ikonlar @bigbang/icons registry’sinden gelir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Icon } from '@bigbang/ui';

<Icon name="star" />;
<Icon name="triangle-alert" tone="warning" label="Uyarı" />;

Özellikler

nameZorunlu

Açıklama

Kayıtlı ikon adı. Bilinmeyen ad tip hatasıdır; çalışma anında yedek ikon yoktur.

Tür

IconName

size

Açıklama

12, 16, 20, 24 ya da 32 px; inherit, üst bileşenin verdiği kutuyu doldurur.

Tür

'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit'

Varsayılan

'md'

tone

Açıklama

color.icon.* token'larından renk. current, çevresindeki metnin rengini alır.

Tür

'current' | 'default' | 'subtle' | 'inverse' | 'brand' | 'danger' | 'success' | 'warning' | 'info' | 'disabled'

Varsayılan

'current'

label

Açıklama

İkonu anlamlı yapar: role="img" ve bu metin ad olarak verilir. Süs ikonlarında vermeyin; ekran okuyucu onları atlar. Button ve IconButton içindeki ikonlar süs olarak kalır; adı denetim taşır.

Tür

string

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve hiza. Boyutu ya da rengi değiştirmek için kullanmayın.

Tür

string

Icon başka öznitelik almaz. ref iletilmez.

Veri öznitelikleri

• data-component="icon": SVG üzerinde.
• data-icon: kayıtlı ikon adı, örneğin data-icon="check".

Registry’ye ikon eklemek

İkon adları packages/icons/src/registry.ts içinde tanımlıdır; ikon kütüphanesini yalnızca bu dosya içe aktarır. Bir ad ekleyin, sonra Icon ile kullanın.

export const icons = {
  // ...
  'star': { component: Star },
  'arrow-right': { component: ArrowRight, mirror: true },
} as const satisfies Record<string, IconEntry>;

mirror: true, dir="rtl" altında yatay ters dönecek ikonlar içindir. Ad kebab-case ve kalıcı olmalıdır.

import type { IconName } from '@bigbang/ui';

const name: IconName = 'check';

Kaynak ve lisans

Registry’deki simgeler lucide-react 1.59.0 paketinden gelir. Lucide ISC lisanslıdır; Feather kökenli simgeler MIT lisanslıdır. Lisans metinleri packages/icons/NOTICE dosyasındadır. Yalnızca registry’de adı geçen ikonlar pakete girer.