iOS Icon Generator
2つのソースから、Xcodeアセットカタログ用のPNGアイコンイメージセットを生成します。
いつアクティブにするか
- iOS/macOS Xcodeプロジェクトのアイコンアセットを生成するとき
- オープンソースコレクションからアイコンを検索するとき
- アセットカタログ用のPNGイメージセット（1x、2x、3x）を作成するとき
- プレースホルダーアイコンをプロダクション品質のアセットに置き換えるとき
- Xcodeプロジェクト内の既存のアイコンスタイルに合わせるとき
基本原則
1. 2つのソース、1つの出力形式
どちらのソースも同一のXcode互換イメージセットを生成します。ニーズに応じて選択してください：
| ソース | アイコン数 | 必要条件 | 最適な用途 |
|---|---|---|---|
| Iconify API | 200以上のコレクションから275,000以上 | インターネット接続 | 幅広い選択肢、特定のスタイル、オープンソースアイコン |
| 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をプレビュー
アンチパターン
- 既存のプロジェクトアイコンスタイルを確認せずにアイコンを生成する
- プロジェクトに定義されたカラーパレットがあるのにデフォルト色を使用する
- 間違ったサイズで生成する（最初に既存アイコンを確認）
- 生成したアイコンを視覚確認せずにコミットする