# 機能設計書 37-アイコンライブラリ

## 概要

本ドキュメントは、Liam DBアプリケーションで使用されるアイコンライブラリについて記述する。本機能は、lucide-reactからの再エクスポートと、ERD（Entity-Relationship Diagram）用のカスタムアイコンを統合して提供する。

### 本機能の処理概要

**業務上の目的・背景**：統一されたアイコンセットを使用することで、UIの一貫性を保ち、開発効率を向上させる。lucide-reactの豊富なアイコンセットに加え、ERD固有のカーディナリティ表現やドメイン固有のアイコンをカスタム実装で提供する。

**機能の利用シーン**：
- ナビゲーション・ボタンのアイコン表示
- ERDでのリレーションシップ（カーディナリティ）表現
- 各種操作アイコン（コピー、ダウンロード、設定など）

**主要な処理内容**：
1. lucide-reactアイコンの選択的再エクスポート（72種類）
2. ERDカーディナリティアイコン（CardinalityZeroOrManyLeft、CardinalityZeroOrOneLeft/Right）
3. ドメイン固有アイコン（ErdIcon、DiamondIcon、GotoIcon、TidyUpIcon等）

**関連システム・外部連携**：
- lucide-react：ベースアイコンライブラリ
- React：コンポーネントベース

**権限による制御**：
該当なし。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 全画面 | 共通 | 利用画面 | ナビゲーション、ボタン等でのアイコン表示 |
| 12 | スキーマ画面 | 利用画面 | ERDアイコン、カーディナリティアイコン |
| 14 | デザインセッション詳細画面 | 利用画面 | TidyUpIcon、GotoIcon |

## 機能種別

UIコンポーネントライブラリ

## 入力仕様

### 入力パラメータ

#### lucide-reactアイコン（共通Props）

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| size | string / number | No | アイコンサイズ | デフォルト：24 |
| color | string | No | アイコン色 | デフォルト：currentColor |
| strokeWidth | number | No | 線の太さ | - |

#### カスタムアイコン（共通Props）

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| width | number | No | 幅（px） | アイコンごとにデフォルト値あり |
| height | number | No | 高さ（px） | アイコンごとにデフォルト値あり |
| その他 | SVGProps | No | SVG属性をスプレッド | - |

#### ErdIcon

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| size | string / number | No | アイコンサイズ | - |

### 入力データソース

- コンポーネントのprops

## 出力仕様

### 出力データ

- レンダリングされたSVG要素

### 出力先

- DOM（ブラウザ画面）

## 処理フロー

### 処理シーケンス

#### アイコンインポートフロー

```
1. @liam-hq/uiからアイコンをインポート
   └─ 例：import { Check, ErdIcon } from '@liam-hq/ui'
2. アイコンコンポーネントをレンダリング
   └─ propsでサイズ・色を指定
3. SVG要素として出力
   └─ currentColorで親要素の色を継承
```

### フローチャート

```mermaid
flowchart TD
    A[アイコンインポート] --> B{アイコンタイプ}
    B -->|lucide-react| C[lucide-reactから再エクスポート]
    B -->|カスタム| D[カスタムSVGコンポーネント]
    C --> E[sizeプロップで制御]
    D --> F[width/heightプロップで制御]
    E --> G[SVGレンダリング]
    F --> G
    G --> H[currentColorで色継承]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-37-01 | アクセシビリティ | 全カスタムアイコンにrole="img"とaria-label設定 | カスタムアイコン |
| BR-37-02 | 色継承 | fill/strokeにcurrentColorを使用 | 全アイコン |
| BR-37-03 | デフォルトサイズ | lucide-reactは24x24、カスタムはアイコンごと | 全アイコン |
| BR-37-04 | Props継承 | ComponentPropsWithoutRef<'svg'>でSVG属性をスプレッド | カスタムアイコン |

### アイコン分類

#### lucide-react再エクスポートアイコン（72種類）

| カテゴリ | アイコン例 |
|---------|-----------|
| ナビゲーション | ArrowLeft, ArrowRight, ChevronDown, ChevronUp |
| アクション | Copy, Download, Upload, Search, Settings |
| 状態 | Check, X, AlertTriangle, Info |
| UI | Menu, Plus, Minus, Ellipsis |
| ファイル | FileCode, FileJson, FileText |
| ユーザー | Users, LogOut, Building |
| コード | CodeXml, GitBranch, GitPullRequestArrow |

#### カスタムアイコン（11種類）

| アイコン名 | 用途 | サイズ |
|-----------|------|--------|
| CardinalityZeroOrManyLeftIcon | ERDカーディナリティ（0..N左） | 22x16 |
| CardinalityZeroOrOneLeftIcon | ERDカーディナリティ（0..1左） | 22x16 |
| CardinalityZeroOrOneRightIcon | ERDカーディナリティ（0..1右） | 22x16 |
| DiamondIcon | ダイアモンド（枠線） | 24x24 |
| DiamondFillIcon | ダイアモンド（塗り） | 24x24 |
| ErdIcon | ERDシンボル | size可変 |
| FacebookIcon | ソーシャル | 24x24 |
| GotoIcon | 遷移/ジャンプ | 24x24 |
| InfoIcon | 情報 | 24x24 |
| TidyUpIcon | 整列/整理 | 24x24 |

## データベース操作仕様

本機能はUIコンポーネントのため、直接的なデータベース操作は行わない。

## エラー処理

### エラーケース一覧

該当なし。アイコンコンポーネントはエラーを発生させない。

### リトライ仕様

該当なし。

## トランザクション仕様

該当なし。

## パフォーマンス要件

- SVGはインラインでレンダリングされるため、ネットワークリクエストなし
- Tree-shakingにより未使用アイコンはバンドルから除外

## セキュリティ考慮事項

- SVGのXSSリスクはReactのJSXエスケープにより軽減

## 備考

- Storybookで全アイコンのカタログを表示可能
- カスタムアイコンはIcon接尾辞で命名（ErdIcon、DiamondIcon等）
- lucide-reactアイコンは接尾辞なし

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: エクスポート構成を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.ts | `frontend/packages/ui/src/icons/index.ts` | lucide-reactとカスタムアイコンの統合 |

**主要処理フロー**:
- **1-73行目**: lucide-reactからの選択的エクスポート（72種類）
- **74-84行目**: カスタムアイコンの再エクスポート

#### Step 2: カスタムアイコンの実装パターンを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CardinalityZeroOrManyLeftIcon.tsx | `frontend/packages/ui/src/icons/CardinalityZeroOrManyLeftIcon.tsx` | ERDカーディナリティアイコン |
| 2-2 | ErdIcon.tsx | `frontend/packages/ui/src/icons/ErdIcon.tsx` | sizeプロップ対応パターン |
| 2-3 | DiamondIcon.tsx | `frontend/packages/ui/src/icons/DiamondIcon.tsx` | 標準的なカスタムアイコン |

**主要処理フロー（CardinalityZeroOrManyLeftIcon.tsx）**:
- **1-3行目**: 型定義（ComponentPropsWithoutRef<'svg'>）
- **5-36行目**: SVG実装、role="img"、aria-label設定
- **16-22行目**: パスによる図形描画、fill="currentColor"

**主要処理フロー（ErdIcon.tsx）**:
- **3-5行目**: IconProps型（sizeプロップ追加）
- **7-32行目**: SVG実装、stroke="currentColor"
- **23-29行目**: transform="rotate(-90 12 12)"で回転

#### Step 3: Storybookカタログを確認する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.stories.tsx | `frontend/packages/ui/src/icons/index.stories.tsx` | 全アイコンの一覧表示 |

**主要処理フロー**:
- **86-167行目**: iconsMapで全アイコンをオブジェクト化
- **209-213行目**: アイコン名によるサイズ指定の分岐（Icon接尾辞判定）

### プログラム呼び出し階層図

```
@liam-hq/ui/icons
    ├─ lucide-react（再エクスポート）
    │      ├─ AlertTriangle, ArrowDown, ArrowLeft...
    │      ├─ Check, ChevronDown, ChevronLeft...
    │      ├─ Copy, Download, Upload...
    │      └─ ...（72種類）
    │
    └─ カスタムアイコン
           ├─ CardinalityZeroOrManyLeftIcon
           ├─ CardinalityZeroOrOneLeftIcon
           ├─ CardinalityZeroOrOneRightIcon
           ├─ DiamondIcon
           ├─ DiamondFillIcon
           ├─ ErdIcon
           ├─ FacebookIcon
           ├─ GotoIcon
           ├─ InfoIcon
           └─ TidyUpIcon
```

### データフロー図

```
コンポーネント
    │
    ↓
import { Check, ErdIcon } from '@liam-hq/ui'
    │
    ↓
┌──────────────────────────────────┐
│ index.ts                         │
│  ├─ export { Check } from        │
│  │    'lucide-react'             │
│  └─ export * from './ErdIcon'    │
└─────────────┬────────────────────┘
              │
    ┌─────────┴─────────┐
    ↓                   ↓
┌────────────┐    ┌──────────────┐
│ lucide-    │    │ ErdIcon.tsx  │
│ react      │    │ (カスタム)   │
└────────────┘    └──────────────┘
    │                   │
    ↓                   ↓
<Check size={24} />  <ErdIcon size={24} />
    │                   │
    ↓                   ↓
┌──────────────────────────────────┐
│ SVG要素（DOM）                   │
│ color: currentColor              │
└──────────────────────────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.ts | `frontend/packages/ui/src/icons/index.ts` | ソース | アイコンエクスポート |
| index.stories.tsx | `frontend/packages/ui/src/icons/index.stories.tsx` | Storybook | アイコンカタログ |
| CardinalityZeroOrManyLeftIcon.tsx | `frontend/packages/ui/src/icons/CardinalityZeroOrManyLeftIcon.tsx` | ソース | カーディナリティ0..N左 |
| CardinalityZeroOrOneLeftIcon.tsx | `frontend/packages/ui/src/icons/CardinalityZeroOrOneLeftIcon.tsx` | ソース | カーディナリティ0..1左 |
| CardinalityZeroOrOneRightIcon.tsx | `frontend/packages/ui/src/icons/CardinalityZeroOrOneRightIcon.tsx` | ソース | カーディナリティ0..1右 |
| DiamondIcon.tsx | `frontend/packages/ui/src/icons/DiamondIcon.tsx` | ソース | ダイアモンド枠線 |
| DiamondFillIcon.tsx | `frontend/packages/ui/src/icons/DiamondFillIcon.tsx` | ソース | ダイアモンド塗り |
| ErdIcon.tsx | `frontend/packages/ui/src/icons/ErdIcon.tsx` | ソース | ERDシンボル |
| FacebookIcon.tsx | `frontend/packages/ui/src/icons/FacebookIcon.tsx` | ソース | Facebookアイコン |
| GotoIcon.tsx | `frontend/packages/ui/src/icons/GotoIcon.tsx` | ソース | 遷移アイコン |
| InfoIcon.tsx | `frontend/packages/ui/src/icons/InfoIcon.tsx` | ソース | 情報アイコン |
| TidyUpIcon.tsx | `frontend/packages/ui/src/icons/TidyUpIcon.tsx` | ソース | 整列アイコン |
