Icon
Lucide 아이콘 래퍼와 신뢰 상태 아이콘 매핑.
- 출시 화면에서 사용
개요
미리보기
예시
상태
장식
이름 있음
16px
24px
아이콘 집합
전체 45개 이름은 Props의 name 목록에 있다. 자주 쓰는 것만 여기에 보인다.
calendar
mail
file-text
folder
search
link
unplug
refresh
circle-alert
clock
이렇게 · 이렇게 하지 않기
- 이렇게 아이콘은 라벨을 돕고 대신하지 않는다. 뜻이 있는 아이콘은 이름을 갖고, 장식은 aria-hidden으로 둔다. 신뢰 상태 아이콘은 정해진 매핑만 쓰고, 체크 표시 하나로 “원문 일치”를 대신하지 않는다.
- 이렇게 아이콘은 텍스트 라벨을 돕는다. 신뢰 상태 아이콘은 항상 텍스트와 함께.
- 이렇게 하지 않기 체크 아이콘 하나로 “확인됨”을 표현하지 않는다.
- 이렇게 하지 않기 채운 아이콘이나 다른 세트를 섞지 않는다. 회전·애니메이션은 Loader만.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
name | IconName | calendar | 정해 둔 45개 중 하나. 새 이름을 더하는 것은 디자인 결정이다. |
size? | 16 | 20 | 24 | 20 | px. 본문 옆 16–20, 단독 24. |
strokeWidth? | 1.5 | 1.75 | 2 | 1.75 | 획 굵기. 화면 안에서는 하나로 통일한다. |
label? | string | | 아이콘 혼자 뜻을 전할 때만. 있으면 role="img" + aria-label, 없으면 aria-hidden. 버튼 안 아이콘은 항상 비운다. |
icons / iconNames | — | — | 집합은 Icon.tsx의 icons 맵 하나다. 화면에서 lucide-react를 직접 가져오지 않는다. |
| 그 밖의 속성 | — | — | id, aria-describedby 등 네이티브 svg 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 해당 없음(비대화형).
- 기본 aria-hidden="true" focusable="false". label이 있으면 role="img"와 aria-label.
- currentColor라 forced-colors에서 글자 색을 따른다.