@zenkigen-inc/component-icons 1.16.2 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -5
- package/dist/index.d.mts +591 -5
- package/dist/index.d.ts +591 -5
- package/dist/index.js +563 -533
- package/dist/index.mjs +646 -616
- package/docs/icon-addition-workflow.md +617 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
yarn add @zenkigen-inc/component-icons
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
### 直接インポートする方法
|
|
14
|
+
|
|
15
|
+
アイコン要素を直接インポートして使用できます:
|
|
14
16
|
|
|
15
17
|
```tsx
|
|
16
18
|
import { iconElements } from '@zenkigen-inc/component-icons';
|
|
@@ -19,6 +21,76 @@ import { iconElements } from '@zenkigen-inc/component-icons';
|
|
|
19
21
|
<div>{iconElements['add']}</div>;
|
|
20
22
|
```
|
|
21
23
|
|
|
24
|
+
### Icon コンポーネントを使用する方法（推奨）
|
|
25
|
+
|
|
26
|
+
`@zenkigen-inc/component-ui` の Icon コンポーネントを使用することで、より柔軟にアイコンを扱えます:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { Icon } from '@zenkigen-inc/component-ui';
|
|
30
|
+
|
|
31
|
+
// 基本的な使用
|
|
32
|
+
<Icon name="add" size="medium" color="icon01" />
|
|
33
|
+
|
|
34
|
+
// サイズとカラーの指定
|
|
35
|
+
<Icon name="settings" size="large" color="icon02" />
|
|
36
|
+
|
|
37
|
+
// アクセントカラーを使用（対応アイコンのみ）
|
|
38
|
+
<Icon
|
|
39
|
+
name="calendar-today"
|
|
40
|
+
size="medium"
|
|
41
|
+
color="icon01"
|
|
42
|
+
accentColor="interactive01"
|
|
43
|
+
/>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
詳細は [Icon コンポーネント仕様書](../../docs/component/icon-specification.md) を参照してください。
|
|
47
|
+
|
|
48
|
+
## アクセントカラー対応アイコン
|
|
49
|
+
|
|
50
|
+
一部のアイコンは **アクセントカラー** 機能に対応しています。これにより、アイコン内の特定要素に異なる色を適用して、状態やステータスを視覚的に表現できます。
|
|
51
|
+
|
|
52
|
+
### 対応アイコン一覧
|
|
53
|
+
|
|
54
|
+
現在、以下のアイコンがアクセントカラーに対応しています：
|
|
55
|
+
|
|
56
|
+
| アイコン名 | 用途 | 推奨アクセントカラー例 |
|
|
57
|
+
| -------------------- | ---------------------------- | -------------------------------- |
|
|
58
|
+
| `calendar-attention` | カレンダー注意状態 | `supportError` |
|
|
59
|
+
| `calendar-check` | カレンダーチェック状態 | `supportSuccess` |
|
|
60
|
+
| `calendar-minus` | カレンダーマイナス状態 | `supportWarning` |
|
|
61
|
+
| `calendar-today` | カレンダー今日表示 | `interactive01` |
|
|
62
|
+
| `mic` | マイク（アクティブ状態表示） | `supportSuccess`, `supportError` |
|
|
63
|
+
| `volume-off` | 音量オフ（オフライン表示） | `supportError` |
|
|
64
|
+
|
|
65
|
+
### 使用例
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { Icon } from '@zenkigen-inc/component-ui';
|
|
69
|
+
|
|
70
|
+
// カレンダー - 今日の日付を強調
|
|
71
|
+
<Icon
|
|
72
|
+
name="calendar-today"
|
|
73
|
+
color="icon01"
|
|
74
|
+
accentColor="interactive01"
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
// カレンダー - 注意が必要な日付
|
|
78
|
+
<Icon
|
|
79
|
+
name="calendar-attention"
|
|
80
|
+
color="icon01"
|
|
81
|
+
accentColor="supportError"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
// マイク - アクティブ/ミュート状態の切り替え
|
|
85
|
+
const MicIcon = ({ isActive }: { isActive: boolean }) => (
|
|
86
|
+
<Icon
|
|
87
|
+
name="mic"
|
|
88
|
+
color="icon01"
|
|
89
|
+
accentColor={isActive ? 'supportSuccess' : 'supportError'}
|
|
90
|
+
/>
|
|
91
|
+
);
|
|
92
|
+
```
|
|
93
|
+
|
|
22
94
|
## SVGアイコンの追加方法
|
|
23
95
|
|
|
24
96
|
新しいSVGアイコンを追加するには、以下の手順に従ってください。
|
|
@@ -31,7 +103,9 @@ SVGファイルは以下の条件を満たす必要があります:
|
|
|
31
103
|
- 命名: キャメルケースまたはケバブケース (例: `arrow-right.svg`、`userAdd.svg`)
|
|
32
104
|
- フォーマット: 基本的なSVG構造を持つこと
|
|
33
105
|
|
|
34
|
-
|
|
106
|
+
#### 通常のSVGアイコン
|
|
107
|
+
|
|
108
|
+
以下は標準的なSVGファイルの例です:
|
|
35
109
|
|
|
36
110
|
```svg
|
|
37
111
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -41,6 +115,27 @@ SVGファイルは以下の条件を満たす必要があります:
|
|
|
41
115
|
|
|
42
116
|
> **注意**: `fill`属性はコード生成時に削除されるため、アイコン表示時のスタイルに影響しません。
|
|
43
117
|
|
|
118
|
+
#### アクセントカラー対応SVGアイコン
|
|
119
|
+
|
|
120
|
+
アクセントカラー機能に対応させたい場合は、異なる色を適用したい要素に `class="accentColor"` を追加します:
|
|
121
|
+
|
|
122
|
+
```svg
|
|
123
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
124
|
+
<!-- 基本形状（通常の色） -->
|
|
125
|
+
<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"/>
|
|
126
|
+
|
|
127
|
+
<!-- アクセントカラーを適用する要素 -->
|
|
128
|
+
<circle class="accentColor" cx="12" cy="12" r="3" fill="#FF0000"/>
|
|
129
|
+
</svg>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
**ポイント**:
|
|
133
|
+
|
|
134
|
+
- アクセントカラーを適用したい要素に `class="accentColor"` を追加
|
|
135
|
+
- 複数の要素に適用可能
|
|
136
|
+
- Icon コンポーネントの `accentColor` プロパティで色を動的に変更可能
|
|
137
|
+
- アクセントカラー要素の `fill` 属性も削除されるため、初期値は無視されます
|
|
138
|
+
|
|
44
139
|
### 2. SVGファイルの配置
|
|
45
140
|
|
|
46
141
|
準備したSVGファイルを以下のディレクトリに配置します:
|
|
@@ -71,11 +166,35 @@ yarn build:all
|
|
|
71
166
|
```tsx
|
|
72
167
|
import { Icon } from '@zenkigen-inc/component-ui';
|
|
73
168
|
|
|
74
|
-
//
|
|
75
|
-
<Icon name="new-icon-name"
|
|
169
|
+
// 通常のアイコン
|
|
170
|
+
<Icon name="new-icon-name" size="medium" color="icon01" />
|
|
171
|
+
|
|
172
|
+
// アクセントカラー対応アイコン
|
|
173
|
+
<Icon
|
|
174
|
+
name="new-icon-name"
|
|
175
|
+
size="medium"
|
|
176
|
+
color="icon01"
|
|
177
|
+
accentColor="interactive01"
|
|
178
|
+
/>
|
|
76
179
|
```
|
|
77
180
|
|
|
78
|
-
|
|
181
|
+
**アイコン名の規則**:
|
|
182
|
+
|
|
183
|
+
- ファイル名から拡張子を除いたものがアイコン名になります
|
|
184
|
+
- 例: `arrow-right.svg` → `'arrow-right'`
|
|
185
|
+
- 例: `calendar-today.svg` → `'calendar-today'`
|
|
186
|
+
|
|
187
|
+
**TypeScript型定義**:
|
|
188
|
+
|
|
189
|
+
- 追加したアイコンは `IconName` 型に自動的に含まれ、型安全に使用できます
|
|
190
|
+
- 存在しないアイコン名を指定するとコンパイルエラーになります
|
|
191
|
+
|
|
192
|
+
## 関連ドキュメント
|
|
193
|
+
|
|
194
|
+
より詳細な情報については、以下のドキュメントを参照してください：
|
|
195
|
+
|
|
196
|
+
- **[Icon コンポーネント仕様書](../../docs/component/icon-specification.md)** - Icon コンポーネントの詳細な使用方法、Props、アクセシビリティ情報
|
|
197
|
+
- **[アイコン追加ワークフロー](./docs/icon-addition-workflow.md)** - アイコン追加の詳細なプロセス、ビルドフロー、コード生成の仕組み
|
|
79
198
|
|
|
80
199
|
## ライセンス
|
|
81
200
|
|