아이콘
아이콘은 Lucide의 아웃라인(선) 스타일 하나만 쓴다. 채워진 아이콘이나 이모지를 섞지 않는다. 아이콘은 서비스가 바뀌어도 같고, 색만 토큰을 따른다.
규칙#
- 모든 아이콘은 Lucide에서 가져온다. 앱은 쓰는 아이콘만 파일 하나씩 가져온다(
@/ui/icons). 전체 묶음을 가져오면 시작 속도가 느려진다. - 새 아이콘이 필요하면
icons.ts에 한 줄을 더한다. 직접 그리거나 다른 아이콘 세트를 섞지 않는다. - 아이콘 색은 글자와 같은 토큰을 쓴다. 기본은
text, 보조는textSecondary, 선택은primary다. - 핵심 행동에는 아이콘만 두지 않고 글자를 함께 쓴다. 아이콘만 쓸 때는
IconButton의label로 이름을 붙인다. - 이모지를 아이콘 대신 쓰지 않는다.
크기와 선 두께#
앱 코드에서 가장 많이 쓰는 값이다. 기본은 크기 18~22, 선 두께 2.2다.
| 항목 | 값 | 쓰는 곳 |
|---|---|---|
| 크기 18 | 가장 많다(96곳) | 버튼 안, 칩, 안내(Notice) |
| 크기 22 | 두 번째(58곳) | 탭 바, 헤더, IconButton |
| 크기 20 | 48곳 | 목록 행, 입력 칸 안 |
| 크기 15~17 | 각 37~44곳 | 작은 보조 아이콘(ChevronRight 등) |
| 선 두께 2.2 | 가장 많다(130곳) | 기본값 |
| 선 두께 2.4 | 82곳 | PrimaryButton의 화살표 같이 진해야 하는 아이콘 |
| 선 두께 2 | 44곳 | 대화상자 아이콘, 안내 아이콘 |
| 선 두께 3~3.2 | 19곳 | 체크 표시처럼 작고 굵어야 하는 아이콘 |
위 횟수는 Mordy 앱 코드에서 센 값이다. 기존 설계 문서(docs/design/tokens.md)에는 선 두께 1.75라고 적혀 있지만 실제 코드는 2.2를 쓴다. 이 문서는 실제 코드를 따른다.
아이콘 목록#
앱(Mordy)이 쓰는 아이콘 156개와 Calendar 앱 전용 8개다. 이름은 코드에서 가져올 때 쓰는 이름이다.
Mordy (156개)
156개 표시 중 (전체 156개)
Calendar 앱 전용 (8개)
8개 표시 중 (전체 8개)
쓰는 방법#
앱에서 쓰기
import { CalendarDays } from '@/ui/icons';
import { color } from '@/ui/tokens';
<CalendarDays size={22} color={color.text} strokeWidth={2.2} />웹에서 쓰기 (lucide-react)
import { CalendarDays } from 'lucide-react';
<CalendarDays size={22} strokeWidth={2.2} color="var(--tds-text)" aria-hidden />