@zenkigen-inc/component-icons 1.16.3 → 1.18.0

package/README.md

@@ -2,6 +2,23 @@
 
 コンポーネントで使用するアイコンを管理するパッケージです。
 
+## 目次
+
+- [使い方](#使い方)
+  - [Icon コンポーネントを使用する方法（推奨）](#icon-コンポーネントを使用する方法推奨)
+  - [直接インポートする方法](#直接インポートする方法)
+- [アクセントカラー対応アイコン](#アクセントカラー対応アイコン)
+  - [対応アイコン一覧](#対応アイコン一覧)
+  - [使用例](#使用例)
+- [開発者向け](#開発者向け)
+  - [SVGアイコンの追加方法](#svgアイコンの追加方法)
+    - [1. SVGファイルの準備](#1-svgファイルの準備)
+    - [2. SVGファイルの配置](#2-svgファイルの配置)
+    - [3. ビルド実行](#3-ビルド実行)
+    - [4. アイコンの利用](#4-アイコンの利用)
+- [関連ドキュメント](#関連ドキュメント)
+- [ライセンス](#ライセンス)
+
 ## 使い方
 
 インストール:
@@ -10,7 +27,33 @@
 yarn add @zenkigen-inc/component-icons
 ```
 
-アイコンのインポート:
+### Icon コンポーネントを使用する方法（推奨）
+
+`@zenkigen-inc/component-ui` の Icon コンポーネントを使用することで、より柔軟にアイコンを扱えます:
+
+```tsx
+import { Icon } from '@zenkigen-inc/component-ui';
+
+// 基本的な使用
+<Icon name="add" size="medium" color="icon01" />
+
+// サイズとカラーの指定
+<Icon name="settings" size="large" color="icon02" />
+
+// アクセントカラーを使用（対応アイコンのみ）
+<Icon
+  name="calendar-today"
+  size="medium"
+  color="icon01"
+  accentColor="interactive01"
+/>
+```
+
+詳細は [Icon コンポーネント仕様書](../../docs/component/icon-specification.md) を参照してください。
+
+### 直接インポートする方法
+
+アイコン要素を直接インポートして使用することもできます:
 
 ```tsx
 import { iconElements } from '@zenkigen-inc/component-icons';
@@ -19,11 +62,59 @@ import { iconElements } from '@zenkigen-inc/component-icons';
 <div>{iconElements['add']}</div>;
 ```
 
-## SVGアイコンの追加方法
+## アクセントカラー対応アイコン
+
+一部のアイコンは **アクセントカラー** 機能に対応しています。これにより、アイコン内の特定要素に異なる色を適用して、状態やステータスを視覚的に表現できます。
+
+### 対応アイコン一覧
+
+現在、以下のアイコンがアクセントカラーに対応しています：
+
+| アイコン名           | 用途                         | 推奨アクセントカラー例           |
+| -------------------- | ---------------------------- | -------------------------------- |
+| `calendar-attention` | カレンダー注意状態           | `supportError`                   |
+| `calendar-check`     | カレンダーチェック状態       | `supportSuccess`                 |
+| `calendar-minus`     | カレンダーマイナス状態       | `supportWarning`                 |
+| `calendar-today`     | カレンダー今日表示           | `interactive01`                  |
+| `mic`                | マイク（アクティブ状態表示） | `supportSuccess`, `supportError` |
+| `volume-off`         | 音量オフ（オフライン表示）   | `supportError`                   |
+
+### 使用例
+
+```tsx
+import { Icon } from '@zenkigen-inc/component-ui';
+
+// カレンダー - 今日の日付を強調
+<Icon
+  name="calendar-today"
+  color="icon01"
+  accentColor="interactive01"
+/>
+
+// カレンダー - 注意が必要な日付
+<Icon
+  name="calendar-attention"
+  color="icon01"
+  accentColor="supportError"
+/>
+
+// マイク - アクティブ/ミュート状態の切り替え
+const MicIcon = ({ isActive }: { isActive: boolean }) => (
+  <Icon
+    name="mic"
+    color="icon01"
+    accentColor={isActive ? 'supportSuccess' : 'supportError'}
+  />
+);
+```
+
+## 開発者向け
+
+### SVGアイコンの追加方法
 
 新しいSVGアイコンを追加するには、以下の手順に従ってください。
 
-### 1. SVGファイルの準備
+#### 1. SVGファイルの準備
 
 SVGファイルは以下の条件を満たす必要があります:
 
@@ -31,7 +122,9 @@ SVGファイルは以下の条件を満たす必要があります:
 - 命名: キャメルケースまたはケバブケース (例: `arrow-right.svg`、`userAdd.svg`)
 - フォーマット: 基本的なSVG構造を持つこと
 
-以下は適切なSVGファイルの例です:
+#### 通常のSVGアイコン
+
+以下は標準的なSVGファイルの例です:
 
 ```svg
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -41,7 +134,28 @@ SVGファイルは以下の条件を満たす必要があります:
 
 > **注意**: `fill`属性はコード生成時に削除されるため、アイコン表示時のスタイルに影響しません。
 
-### 2. SVGファイルの配置
+#### アクセントカラー対応SVGアイコン
+
+アクセントカラー機能に対応させたい場合は、異なる色を適用したい要素に `class="accentColor"` を追加します:
+
+```svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 基本形状（通常の色） -->
+  <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" fill="#7C868A"/>
+
+  <!-- アクセントカラーを適用する要素 -->
+  <circle class="accentColor" cx="12" cy="12" r="3" fill="#FF0000"/>
+</svg>
+```
+
+**ポイント**:
+
+- アクセントカラーを適用したい要素に `class="accentColor"` を追加
+- 複数の要素に適用可能
+- Icon コンポーネントの `accentColor` プロパティで色を動的に変更可能
+- アクセントカラー要素の `fill` 属性も削除されるため、初期値は無視されます
+
+#### 2. SVGファイルの配置
 
 準備したSVGファイルを以下のディレクトリに配置します:
 
@@ -49,7 +163,7 @@ SVGファイルは以下の条件を満たす必要があります:
 packages/component-icons/src/svg/
 ```
 
-### 3. ビルド実行
+#### 3. ビルド実行
 
 以下のコマンドを実行してアイコンをビルドします:
 
@@ -64,18 +178,42 @@ yarn build:all
 3. テンプレートを使用して `icon.tsx` が生成されます
 4. パッケージがビルドされます
 
-### 4. アイコンの利用
+#### 4. アイコンの利用
 
 ビルド後、追加したアイコンは Icon コンポーネントで利用できます:
 
 ```tsx
 import { Icon } from '@zenkigen-inc/component-ui';
 
-// 追加したアイコンを表示
-<Icon name="new-icon-name" />;
+// 通常のアイコン
+<Icon name="new-icon-name" size="medium" color="icon01" />
+
+// アクセントカラー対応アイコン
+<Icon
+  name="new-icon-name"
+  size="medium"
+  color="icon01"
+  accentColor="interactive01"
+/>
 ```
 
-アイコン名は、ファイル名から拡張子を除いたものになります (例: `arrow-right.svg` → `'arrow-right'`)
+**アイコン名の規則**:
+
+- ファイル名から拡張子を除いたものがアイコン名になります
+- 例: `arrow-right.svg` → `'arrow-right'`
+- 例: `calendar-today.svg` → `'calendar-today'`
+
+**TypeScript型定義**:
+
+- 追加したアイコンは `IconName` 型に自動的に含まれ、型安全に使用できます
+- 存在しないアイコン名を指定するとコンパイルエラーになります
+
+## 関連ドキュメント
+
+より詳細な情報については、以下のドキュメントを参照してください：
+
+- **[Icon コンポーネント仕様書](../../docs/component/icon-specification.md)** - Icon コンポーネントの詳細な使用方法、Props、アクセシビリティ情報
+- **[アイコン追加ワークフロー](./docs/icon-addition-workflow.md)** - アイコン追加の詳細なプロセス、ビルドフロー、コード生成の仕組み
 
 ## ライセンス