# 아이콘

---

## 라이브러리

**Lucide React** 사용. 일관된 선 굵기(strokeWidth=1.5)와 스타일로 전체 UI의 시각적 통일성을 유지한다.

```bash
npm install lucide-react
```

```tsx
import { ChevronRight, Search, Bell } from 'lucide-react';
```

---

## 사이즈

| 이름 | px | Tailwind 클래스 | 용도 |
|------|----|----------------|------|
| xs | 12px | `size-3` | 배지 내부, 인라인 보조 |
| sm | 16px | `size-4` | 버튼 내부, 레이블 |
| md | 20px | `size-5` | 기본 UI 아이콘 |
| lg | 24px | `size-6` | 네비게이션, 강조 |
| xl | 32px | `size-8` | 상태 표시, 빈 상태 일러스트 |

기본값은 `md` (20px). 별도 지정이 없으면 `size-5` 사용.

---

## strokeWidth

| 컨텍스트 | strokeWidth |
|----------|-------------|
| 기본 UI | 1.5 (Lucide 기본값) |
| 굵은 강조 | 2 |
| 가는 장식 | 1 |

기본값 그대로 사용. 의도적인 경우에만 override.

---

## 색상 규칙

아이콘에 직접 color HEX를 지정하지 않는다. 부모 텍스트 색상을 상속하거나 CSS 변수를 사용한다.

| 상황 | 클래스 |
|------|--------|
| 본문과 함께 | `text-[var(--color-text-primary)]` 상속 |
| 보조 아이콘 | `text-[var(--color-text-secondary)]` |
| 비활성 | `text-[var(--color-text-tertiary)]` |
| 강조 (Primary) | `text-[var(--color-primary)]` |
| 성공 | `text-[var(--color-success)]` |
| 경고 | `text-[var(--color-warning)]` |
| 오류 | `text-[var(--color-danger)]` |
| 정보 | `text-[var(--color-info)]` |

---

## 사용 패턴

### 버튼 내 아이콘

```tsx
<button class="flex items-center gap-2 ...">
  <ChevronRight className="size-4" />
  다음
</button>
```

### 텍스트와 인라인 정렬

```tsx
<span class="flex items-center gap-1.5 text-sm text-[var(--color-text-secondary)]">
  <Clock className="size-4 shrink-0" />
  2시간 전
</span>
```

### 아이콘 전용 버튼

```tsx
<button
  aria-label="알림"
  class="rounded-lg p-2 hover:bg-[var(--color-bg-surface)] text-[var(--color-text-secondary)]"
>
  <Bell className="size-5" />
</button>
```

### 상태 아이콘

```tsx
<CheckCircle className="size-5 text-[var(--color-success)]" />
<AlertTriangle className="size-5 text-[var(--color-warning)]" />
<XCircle className="size-5 text-[var(--color-danger)]" />
<Info className="size-5 text-[var(--color-info)]" />
```

---

## 접근성

- 장식용 아이콘: `aria-hidden="true"` 필수
- 의미 있는 아이콘: `aria-label` 또는 시각적으로 숨긴 텍스트 제공

```tsx
// 장식용
<ChevronRight aria-hidden="true" className="size-4" />

// 의미 있는 아이콘 버튼
<button aria-label="삭제">
  <Trash2 className="size-5" aria-hidden="true" />
</button>
```

---

## 자주 쓰는 아이콘 목록

| 용도 | 아이콘 |
|------|--------|
| 검색 | `Search` |
| 알림 | `Bell` |
| 설정 | `Settings` |
| 사용자 | `User`, `Users` |
| 메뉴 | `Menu`, `MoreVertical`, `MoreHorizontal` |
| 닫기 | `X` |
| 확인 | `Check`, `CheckCircle` |
| 오류 | `XCircle`, `AlertCircle` |
| 경고 | `AlertTriangle` |
| 정보 | `Info` |
| 편집 | `Pencil`, `Edit2` |
| 삭제 | `Trash2` |
| 추가 | `Plus`, `PlusCircle` |
| 이동 | `ChevronRight`, `ChevronDown`, `ArrowRight` |
| 새로고침 | `RefreshCw` |
| 다운로드 | `Download` |
| 업로드 | `Upload` |
| 링크 | `ExternalLink` |
| 복사 | `Copy` |
| 필터 | `Filter`, `SlidersHorizontal` |
| 정렬 | `ArrowUpDown` |
| 로그 | `FileText`, `ClipboardList` |
| 차트 | `BarChart2`, `LineChart`, `PieChart` |
| 서버 | `Server`, `Database` |
| API | `Zap`, `Code2` |
| 시간 | `Clock`, `Calendar` |