Menu
wiz-ui にアイコンを追加する。Material Symbols (fonts.google.com/icons) から SVG を取得して packages/icons/assets に配置し、Issue 作成 → ビルド → Storybook 確認 → changeset → PR までの一連のフローを実行する。「アイコンを追加して」「〜のアイコンが欲しい」等の依頼で使用する。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | add-icon |
| description | wiz-ui にアイコンを追加する。Material Symbols (fonts.google.com/icons) から SVG を取得して packages/icons/assets に配置し、Issue 作成 → ビルド → Storybook 確認 → changeset → PR までの一連のフローを実行する。「アイコンを追加して」「〜のアイコンが欲しい」等の依頼で使用する。 |
| argument-hint | <icon-name> [bold|filled|normal]... |
Material Symbols (Rounded) から SVG を取得し、wiz-ui のアイコンコンポーネントとして追加して PR を作成する。
追加するアイコンについて以下の2点を必ず確定させる。
引数の解釈: 最初の引数がアイコン名、それ以降はすべて種類（複数指定可）。例: /add-icon home bold filled → home の bold と filled を追加。
home, calendar_month）。引数や依頼文から読み取れない場合は、AskUserQuestion は使わずテキストで自由入力してもらう（候補の選択肢を出しても当たる確率が低いため）。その際「アイコンは https://fonts.google.com/icons で探して、そのアイコン名を教えてほしい」と案内すること。
| 種類 | 保存ファイル名 | 仕様 | 備考 |
|---|---|---|---|
| Normal | <kebab-name>.svg | Rounded / fill: 0 / weight: 200 / grade: 0 / 24 | deprecated |
| Bold | <kebab-name>-bold.svg | Rounded / fill: off / weight: 400 / grade: 0 / 24dp | |
| Filled | <kebab-name>-filled.svg | Rounded / fill: on / weight: 400 / grade: 0 / 24dp |
main を最新化してから feat/icon-<name> ブランチを作成する。
git switch main && git pull && git switch -c feat/icon-<name>
.github/ISSUE_TEMPLATE/機能追加（アイコン）.md と同じ形式で Issue を作成する（実例: #1641）。
gh issue create --title "Feat(icon): <name>-<variant>" --body '追加するアイコン:
```yaml
- <name> (bold) # -> WizI<PascalName>Bold
- <name> (filled) # -> WizI<PascalName>Filled
```'
作成された Issue 番号は Step 9 の PR body で使うので控えておく。
以下の URL から curl で取得する。URL 中のアイコン名は snake_case（例: calendar_month）、保存ファイル名は kebab-case（例: calendar-month）である点に注意。
https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<snake_case_name>/<spec>/24px.svg
| 種類 | <spec> |
|---|---|
| Bold | default |
| Filled | fill1 |
| Normal (deprecated) | wght200 |
取得例（bold + filled）:
cd packages/icons/assets
curl -sf "https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<snake_name>/default/24px.svg" -o <kebab-name>-bold.svg
curl -sf "https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<snake_name>/fill1/24px.svg" -o <kebab-name>-filled.svg
<svg で始まる正常な SVG かを必ず確認する取得した SVG は height="24" width="24" になっているので、両方を 1em に置換する（既存の全アイコンと同じ。1rem ではない — 1em でないと親の font-size に追従しなくなる）。
sed -i '' 's/height="24"/height="1em"/; s/width="24"/width="1em"/' <file>.svg
加工後の期待形（既存の bookmark-bold.svg などと同形式）:
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="..."/></svg>
注意: fill 属性や fill="currentColor" は追加しない（色は利用側の CSS fill で制御する。過去に fill が混入して修正した経緯あり）。
cd packages/icons && pnpm build
これにより以下が自動生成される。手で編集しないこと。
packages/constants/component/icon-name.ts（WizI<PascalName> が追加される）packages/wiz-ui-next/src/components/icons/<kebab-name>.vue + index.tspackages/wiz-ui-react/src/components/icons/<kebab-name>.tsx + index.tsビルド後、git status で上記ファイルが生成・更新されていることを確認する。
pnpm --filter @wizleap-inc/wiz-ui-next storybook:dev # port 6007
Icons > Overview ストーリー（http://localhost:6007/?path=/story/icons--overview）に新しいアイコンが名前つきで表示され、形が崩れていないことを確認する。ブラウザ自動化ツールが使えるならスクリーンショットで検証し、使えなければユーザーに目視確認を依頼する。確認が済んだら Storybook プロセスは停止する。
.changeset/ にランダムな名前の md ファイルを作成する（例: .changeset/add-icon-<name>.md）。過去の実例（wide-shirts-tan.md）と同形式:
---
"@wizleap-inc/wiz-ui-react": minor
"@wizleap-inc/wiz-ui-next": minor
"@wizleap-inc/wiz-ui-constants": minor
"@wizleap-inc/wiz-ui-icons": minor
---
Icon の追加 (<PascalName>Bold, <PascalName>Filled)
コミットメッセージは既存の規約に合わせる（例: feat: <name> の icon を追加）。
git add packages/icons/assets packages/constants packages/wiz-ui-next/src/components/icons packages/wiz-ui-react/src/components/icons .changeset
git commit -m "feat: <name> の icon を追加"
git push -u origin feat/icon-<name>
gh pr create --title "Feat(icon): <name>-<variant>" --body "close #<issue番号>
## 変更内容
- <name> (bold / filled) のアイコンを追加"
PR 作成後、URL をユーザーに報告する。