아이콘

원칙

• 인터페이스 기호는 모두 Icon으로 그리세요. Icon의 SVG는 격자, 획, 색을 공유하지만 이모지, 아이콘 폰트, 특수 문자는 그러지 못합니다.
• 동작은 부모 컨트롤이 맡게 하세요. 버튼이나 링크가 포커스, 클릭, 누르는 영역을 맡으므로 아이콘을 줄여도 영역은 줄지 않습니다.
• 그림이 아니라 동작에 이름을 붙이세요. 아이콘만 있는 버튼에는 "세부 정보 닫기" 같은 이름을 주고, 텍스트 옆 아이콘은 숨기세요.
• 상태 아이콘에는 글자를 함께 쓰세요. 모양과 색만으로는 모든 사람에게 뜻이 전해지지 않습니다.
• 읽는 방향을 가리키는 아이콘만 뒤집으세요. 뒤로와 앞으로 화살표는 오른쪽에서 왼쪽으로 읽는 레이아웃에서 뒤집히고, 검색, 재생, 외부 링크는 그대로입니다.

크기와 획

Icon은 다른 컴포넌트처럼 small, default, large를 받습니다. 14, 16, 20px이고, 생략하면 16px입니다. Button 안에서는 버튼 크기를 따릅니다. 아이콘은 currentColor로 그리므로 글자 색과 강제 색상을 따릅니다.

아이콘 세트

Icon에는 모양이 43개 있습니다. 인터페이스 동작과 상태, 그리고 장비를 운영하는 제품을 위한 인프라 묶음(server, database, disk, chip, memory, network, bolt, token, thermometer), 보기 컨트롤(pin, list, grid)입니다. 추가하려면 이름과 용도를 붙여 공유 소스에 넣고 테스트하세요.

• search
• plus
• close
• check
• info
• alert
• warning
• menu
• sidebar
• more
• sun
• moon
• monitor
• minus
• minus-circle
• clock
• chevron-down
• chevron-forward
• chevron-back
• arrow-back
• arrow-up
• arrow-down
• refresh
• sort
• external-link
• copy
• play
• upload
• calendar
• user
• settings
• server
• database
• disk
• chip
• memory
• network
• bolt
• token
• thermometer
• pin
• list
• grid

접근 가능한 이름

텍스트 옆 아이콘은 장식이므로 Icon이 기본으로 숨깁니다. 아이콘만 있는 버튼에는 aria-label을 주세요. Tooltip은 이를 대신하지 않습니다. 의미 있는 단독 아이콘에는 decorative={false}와 label을 설정하세요.

로컬 카운트: 0

자기 이름이 있는 단독 아이콘입니다.

포커스는 버튼이 받습니다. SVG에 tabIndex나 클릭 핸들러를 더하지 마세요.

import { Icon, Button } from '@surflane/ui'

<Button>
  <Icon name='plus' />
  Add environment
</Button>
<Button size='icon' aria-label='Close details'>
  <Icon name='close' />
</Button>
<Icon name='info' decorative={false} label='Additional information' />

W3C — SVG 아이콘 / WAI — 기능 이미지

방향

dir이 rtl이면 arrow-back, chevron-back, chevron-forward만 뒤집힙니다. Base UI 컨트롤의 화살표 키도 맞도록 DirectionProvider에 같은 방향을 주세요.

방향을 비교하는 정적 표시입니다.

관련 문서

• 색 — 색 역할, 대비 기준, 팔레트 만드는 법을 정합니다.
• 접근성 — 모든 화면이 지킬 WCAG 2.2 AA 기준을 정합니다.
• Button — 명확한 라벨로 작업을 실행합니다.
• Badge / Status — 상태를 색, 아이콘, 텍스트로 함께 보여 줍니다.