iOSアイコン生成 は何をしますか？
SF Symbols（Appleネイティブ5,000+）またはIconify API（275k+のオープンソースアイコン、200+コレクション）から、Xcodeアセットカタログ用のPNGアイコン画像セットを生成します。
アクティブにするタイミング
- iOS/macOS Xcodeプロジェクトのアイコンアセットを生成するとき
- オープンソースコレクションからアイコンを検索するとき
- アセットカタログ用のPNG画像セット（1x、2x、3x）を作成するとき
- プレースホルダーアイコンを本番品質のアセットで置き換えるとき
- Xcodeプロジェクト内の既存アイコンスタイルに合わせるとき
基本原則
1. 2つのソース、1つの出力形式
どちらのソースも、Xcode互換の同一フォーマットの画像セットを生成します。ニーズに応じて選択してください。
| ソース | アイコン数 | 必要なもの | 最適な用途 |
|---|---|---|---|
| Iconify API | 275,000+（200+コレクション） | インターネット | 幅広い選択肢、特定のスタイル、オープンソースアイコン |
| SF Symbols | 5,000+のAppleシンボル | macOSのみ | Appleネイティブスタイル、オフライン作業 |
2. 常に既存のスタイルに合わせる
生成前に、プロジェクトの既存アイコンのサイズ、色、太さの一貫性を確認してください。
3. 出力構造
どちらの方法でも、完全なXcode画像セットを生成します。
<出力ディレクトリ>/<アセット名>.imageset/
Contents.json
<アセット名>.png # 1x（デフォルト68px）
<アセット名>@2x.png # 2x（デフォルト136px）
<アセット名>@3x.png # 3x（デフォルト204px）
例
ステップ1: 要件の確認
アイコンのニーズ（アイコンが表すもの、希望スタイル、ターゲットカラー、サイズ）を決めます。
プロジェクトに既存アイコンがある場合は、スタイルを確認します。
# 既存アイコンの寸法を確認
sips -g pixelWidth -g pixelHeight path/to/[email protected]
ステップ2: アイコンを検索
Iconify API（幅広い選択肢におすすめ）:
# 全コレクションから検索
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"
# 特定のコレクション内で検索
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi
# 利用可能なコレクション一覧表示
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols（Appleネイティブスタイルの場合）: SF Symbolsアプリを参照するか、一般的な名前を確認します。
| 用途 | シンボル名 |
|---|---|
| 書類 | doc.text, doc.fill |
| 領収書 | doc.text.below.ecg, receipt |
| 人物 | person.crop.rectangle, person.text.rectangle |
| カメラ | camera, camera.fill |
| スキャン | doc.viewfinder, qrcode.viewfinder |
| 設定 | gearshape, slider.horizontal.3 |
ステップ3: プレビュー（任意）
# Iconifyプレビュー
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
ステップ4: 生成
Iconify API:
# 基本生成
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# カスタムカラーと出力先
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
オプション: --size <pt>（デフォルト: 68）、--color <hex>（デフォルト: 8E8E93）、--output <dir>（デフォルト: /tmp/icons）
SF Symbols:
# 基本生成
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# カスタムカラー、太さ、出力先
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
オプション: --size <pt>（デフォルト: 68）、--color <hex>（デフォルト: 8E8E93）、--weight <name>（デフォルト: thin）、--output <dir>（デフォルト: /tmp/icons）
ステップ5: 確認と統合
- 生成された@2x PNGを開いて視覚的に確認する
- 直接アセットカタログに出力していない場合はコピーする:
cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/ - プロジェクトをビルドして、Xcodeが新しいアセットを認識することを確認する
人気のIconifyコレクション
| プレフィックス | 名前 | 数 | スタイル |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | 塗りつぶし＋アウトラインのバリエーション |
ph | Phosphor | 9000+ | アイコンあたり6ウェイト |
solar | Solar | 7400+ | ボールド、リニア、アウトライン |
tabler | Tabler Icons | 6000+ | 一貫したストローク幅 |
lucide | Lucide | 1700+ | クリーン、ミニマル |
ri | Remix Icon | 3100+ | 塗りつぶし＋ラインのバリエーション |
carbon | Carbon | 2400+ | IBMデザイン言語 |
heroicons | HeroIcons | 1200+ | Tailwind CSSコンパニオン |
すべてを閲覧: https://icon-sets.iconify.design/
スクリプトリファレンス
| スクリプト | ソース | パス |
|---|---|---|
iconify_gen.sh | Iconify API（275k+アイコン） | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols（5k+アイコン） | $SKILL_DIR/scripts/generate_icons.swift |
ベストプラクティス
- 生成前に検索する -- 利用可能なアイコンをブラウズして最適なものを見つける
- 既存のプロジェクトスタイルに合わせる -- 新しいアイコンを生成する前に、既存アイコンの寸法、色、太さを確認する
- 多様性にはIconifyを使う -- 200以上のコレクションから必要なスタイルを正確に見つけられる
- Appleとの一貫性にはSF Symbolsを使う -- システムUIに完全に一致する
- アセットカタログに直接生成する --
--output ./Assets.xcassets/iconsを使って手動コピーを省く - 視覚的に確認する -- コミット前に必ず@2x PNGをプレビューする
アンチパターン
- 既存のプロジェクトアイコンスタイルを確認せずにアイコンを生成する
- プロジェクトに定義済みのカラーパレットがあるのにデフォルトカラーを使用する
- 間違ったサイズで生成する（最初に既存アイコンを確認する）
- 視覚確認せずに生成アイコンをコミットする