Sonic UIv0.6.2

Icon

아이콘은 Lucide만 써요. Sonic이 쓰는 37개가 Figma에 Icon / <이름> 컴포넌트로 있고, 코드에서는 lucide-react의 같은 이름을 써요.

세트

Figma 이름 = 코드 이름이에요. Icon / chevron-down → <ChevronDown />

  • chevron-down
  • chevron-up
  • chevron-left
  • chevron-right
  • arrow-left
  • arrow-right
  • check
  • x
  • plus
  • minus
  • search
  • ellipsis
  • menu
  • settings
  • user
  • bell
  • info
  • circle-alert
  • triangle-alert
  • circle-check
  • loader-circle
  • eye
  • eye-off
  • copy
  • trash-2
  • pencil
  • upload
  • download
  • external-link
  • calendar
  • log-out
  • refresh-cw
  • inbox
  • file
  • image
  • sun
  • moon

크기

space 토큰 크기만 써요. 선 두께는 크기에 비례해 줄어요(absoluteStrokeWidth는 쓰지 않아요).

  • space/4 · 16px
    버튼 sm·md·icon-sm·icon-md, 입력란 안, 본문 옆
  • space/5 · 20px
    버튼 lg·icon-lg
  • space/6 · 24px
    빈 상태처럼 아이콘이 주인공일 때

색

코드에서는 글자색을 그대로 따라가요(currentColor). 아이콘에만 다른 색을 줄 때도 text 토큰만 써요.

  • text/default
  • text/muted
  • text/success
  • text/danger

규칙

  • 글자와 함께면 장식아이콘이 글자 옆에 있으면 화면 낭독기에서 숨겨요(lucide-react 기본 aria-hidden).
  • 아이콘만 있는 버튼은 aria-labelsize="icon-*" 버튼은 aria-label이 타입으로 강제돼요. Tooltip이 있어도 aria-label은 따로 달아요.
  • 뒤쪽 아이콘은 결과를 알릴 때만버튼 문구 뒤에는 펼침(chevron)이나 외부 링크처럼 결과를 알려 주는 아이콘만 둬요.
  • 다른 아이콘 세트는 섞지 않아요새 아이콘이 필요하면 Lucide에서 가져와 Figma Icon / 컴포넌트로 추가해요.