Icon

Ne zaman kullanılır

Icon, metni destekleyen ya da yerine geçen küçük simgeler içindir: buton ve alan simgeleri, durum işaretleri, menü öğeleri. Tüm ikonlar tek bir registry’den gelir.

Ne zaman kullanılmaz

• Süs resmi ya da çizim için: Icon yalnızca registry’deki simgeleri çizer; illüstrasyon ve fotoğraf için görsel kullanın.
• Etkileşim için: Icon tıklanmaz ve odak almaz. İkonla bir işlem yapılacaksa IconButton kullanın.
• Registry’de olmayan bir simge için: Bilinmeyen ad tür hatasıdır. Önce adı registry’ye ekleyin.

Anatomi

xssmmdlgxl

AçıkKoyu

Kodu kopyala

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

export default function Sizes() {
  return (
    <div className="flex items-end gap-lg">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <span key={size} className="flex flex-col items-center gap-xs">
          <Icon name="star" size={size} />
          <code className="type-body-sm text-fg-subtle">{size}</code>
        </span>
      ))}
    </div>
  );
}

1. Simge: Registry’deki ada karşılık gelen SVG; çizgi kalınlığı 2, focusable="false".
2. Kutu: icon-size-* token’ından gelen kare; xs 12 px’ten xl 32 px’e.

Davranış

• Icon durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• name bir tür hatasıdır, çalışma zamanı yedeği değildir: registry’de olmayan ad derlenmez.
• Varsayılan tone="current" ikonun rengini çevresindeki metinden alır; metin rengi değişince ikon da değişir.
• size="inherit" ikonu üst bileşenin kutusuna sığdırır (size-full). Button ikon yuvaları bunu kullanır.
• arrow-left, arrow-right, chevron-left, chevron-right, external-link ve log-out dir="rtl" altında yatay ters döner.
• label yoksa ikon aria-hidden="true" taşır; label varsa role="img" ve aria-label alır.

Yönergeler

İkonu metinle birlikte kullanın

İkonlar tek başına belirsiz kalabilir. Metin varsa ikon süstür; metin yoksa ikona label verin.

İndir

YapınMetin eylemi söylüyor; ikon yalnızca destekliyor.

YapmayınAdı olmayan tek başına ikon: ne anlama geldiği anlaşılmıyor.

Anlam için ton, ton için de anlam

danger, success, warning ve info tonlarını yalnızca ilgili anlam için kullanın. Süs için current ya da subtle yeterlidir.

YapınUyarı ikonu uyarı tonunda ve adı var.

YapmayınTehlike tonu bir süs ikonunda yanlış bir alarm veriyor.

Kontrol içindeki ikona ad vermeyin

Button içindeki ikon süs kalır; adı kontrol taşır. İkona label verirseniz ad iki kez okunur.

İçerik

• label bir ya da iki kelimedir ve ikonun anlattığı şeyi söyler: “Uyarı”, “Bilgi”.
• İkonun görünümünü (“kırmızı üçgen”) değil anlamını yazın.
• İkona yalnızca kendisi bilgi taşıyorsa label verin; yanındaki metin zaten söylüyorsa vermeyin.

Türkçe	İngilizce	İkon ve ton
Uyarı	Warning	triangle-alert, warning
Bilgi	Information	info, info
Başarılı	Success	circle-check, success
Hata	Error	circle-x, danger

İlgili bileşenler

• Button: startIcon ve endIcon yuvalarına size="inherit" ile ikon yerleşir.
• Badge: startIcon ile 12 px süs ikonu alır.
• Provider: direction="rtl" ile yönü izleyen ikonlar ters döner.