Bileşenler

Icon

Kayıtlı ikon setinden bir simge çizer; ad verilmedikçe süstür ve ekran okuyucudan gizlenir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Icon, name ile kayıtlı bir ikonu çizer. Varsayılan boyut md (20 px), varsayılan ton currenttir: çevresindeki metnin rengini alır.

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

export default function Default() {
  return <Icon name="star" />;
}

Boyutlar

Beş boyut vardır: xs 12, sm 16, md 20, lg 24 ve xl 32 px. inherit, bir üst bileşenin verdiği kutuyu doldurur; Button ikon yuvası gibi.

xssmmdlgxl

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>
  );
}

Tonlar

tone, rengi color-icon-* token’larından seçer. current metnin rengini alır; diğerleri anlam taşır: danger, success, warning, info.

defaultsubtlebranddangersuccesswarninginfodisabled

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

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-lg">
      {(['default', 'subtle', 'brand', 'danger', 'success', 'warning', 'info', 'disabled'] as const).map((tone) => (
        <span key={tone} className="flex flex-col items-center gap-xs">
          <Icon name="circle-alert" tone={tone} size="lg" />
          <code className="type-body-sm text-fg-subtle">{tone}</code>
        </span>
      ))}
    </div>
  );
}

Anlamlı ikon

label ikonu anlamlı yapar: role="img" ve aria-label alır. İkon tek başına bilgi taşıyorsa label verin.

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

export default function Meaningful() {
  return (
    <span className="inline-flex items-center gap-xs">
      <Icon name="triangle-alert" tone="warning" label="Uyarı" />
      <Icon name="info" tone="info" label="Bilgi" />
    </span>
  );
}

Sağdan sola

Okuma yönünü izleyen ikonlar (oklar, chevron ayraçları, harici bağlantı, çıkış) dir="rtl" altında yatay ters döner. check gibi diğerleri sabit kalır.

ltr

rtl

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

export default function RightToLeft() {
  return (
    <div className="flex flex-wrap gap-xl">
      {(['ltr', 'rtl'] as const).map((direction) => (
        <div key={direction} dir={direction} className="flex items-center gap-lg">
          <code className="type-body-sm text-fg-subtle">{direction}</code>
          <Icon name="arrow-right" />
          <Icon name="chevron-right" />
          <Icon name="external-link" />
          <Icon name="check" />
        </div>
      ))}
    </div>
  );
}

Kayıtlı ikonlar

Registry’deki 55 adın tamamı aşağıdadır. Her ad kebab-case ve kalıcıdır; arkadaki set değişse de ad değişmez.

align-center

align-left

align-right

arrow-down

arrow-left

arrow-right

arrow-up

bell

bold

calendar

check

chevron-down

chevron-left

chevron-right

chevron-up

chevrons-up-down

circle-alert

circle-check

circle-help

circle-x

clock

copy

download

ellipsis

ellipsis-vertical

external-link

eye

eye-off

file

filter

home

info

italic

layout-grid

list

lock

log-out

mail

menu

minus

moon

pencil

phone

plus

refresh

search

settings

star

sun

trash

triangle-alert

underline

upload

user

x

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

const names = [
  'align-center', 'align-left', 'align-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'bell', 'bold', 'calendar',
  'check', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'chevrons-up-down', 'circle-alert', 'circle-check',
  'circle-help', 'circle-x', 'clock', 'copy', 'download', 'ellipsis', 'ellipsis-vertical', 'external-link', 'eye', 'eye-off',
  'file', 'filter', 'home', 'info', 'italic', 'layout-grid', 'list', 'lock', 'log-out', 'mail', 'menu', 'minus', 'moon', 'pencil',
  'phone', 'plus', 'refresh', 'search', 'settings', 'star', 'sun', 'trash', 'triangle-alert', 'underline', 'upload', 'user', 'x',
] as const;

export default function Registry() {
  return (
    <div className="grid w-full grid-cols-2 gap-md lg:grid-cols-4">
      {names.map((name) => (
        <div key={name} className="flex items-center gap-sm">
          <Icon name={name} size="md" tone="default" />
          <code className="type-body-sm text-fg-subtle">{name}</code>
        </div>
      ))}
    </div>
  );
}

Açık ve koyu mod

İkon renklerini color-icon-* token’larından alır; açık ve koyu modda ve marka değişiminde ayrı ayar gerekmez.

defaultsubtlebranddangersuccesswarninginfodisabled

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

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-lg">
      {(['default', 'subtle', 'brand', 'danger', 'success', 'warning', 'info', 'disabled'] as const).map((tone) => (
        <span key={tone} className="flex flex-col items-center gap-xs">
          <Icon name="circle-alert" tone={tone} size="lg" />
          <code className="type-body-sm text-fg-subtle">{tone}</code>
        </span>
      ))}
    </div>
  );
}