Ios Icon Gen

作者 affaan-mef648e01899b無授權條款275K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 天前更新

SF Symbols（Apple ネイティブ 5,000 件以上）または Iconify API（200 以上のコレクションから 275,000 件以上のオープンソースアイコン）から Xcode アセットカタログ用の PNG イメージセットとして iOS アプリアイコンを生成します。アイコンの生成、アイコンアセットの作成、アセットカタログへのアイコン追加、または iOS プロジェクト向けアイコンの検索を行う際に使用します。

僅含說明Design & CreativeSoftware Development
AI 產生的概覽

從 SF Symbols 或 Iconify API 產生供 Xcode 資產目錄使用的 iOS App 圖示 PNG 影像集。

功能
此技能會產生 Xcode 相容的 .imageset 資料夾，內含 Contents.json 以及 1x、2x、3x 的 PNG 檔案，可作為 iOS App 圖示。圖示來源可為 Apple SF Symbols 或 Iconify API，並支援搜尋圖示集合、預覽所選圖示，以及設定尺寸、顏色、字重與輸出目錄。它也會引導檢查專案現有圖示，讓新資源在尺寸、顏色與字重上保持一致。
適用情境
適用於為 iOS 或 macOS Xcode 專案製作圖示資源、在開源圖示集合中搜尋圖示、需要 1x、2x、3x 的 PNG 影像集，或以正式品質資源取代佔位圖示的情境。
執行需求
使用 Iconify 產生需要網路連線與隨附的 iconify_gen.sh 指令稿；使用 SF Symbols 產生需要 macOS，以及透過 swift 執行的隨附 generate_icons.swift 指令稿。此技能僅為說明文件，本套件中未附帶指令稿。

iOS Icon Generator

2 つのソースから Xcode アセットカタログ用の PNG アイコンイメージセットを生成します。

アクティベートするタイミング

  • iOS/macOS Xcode プロジェクト向けアイコンアセットを生成する
  • オープンソースコレクション全体でアイコンを検索する
  • アセットカタログ用の PNG イメージセット（1x、2x、3x）を作成する
  • プレースホルダーアイコンをプロダクション品質のアセットに置き換える
  • Xcode プロジェクト内の既存アイコンスタイルに合わせる

コア原則

1. 2 つのソース、1 つの出力フォーマット

どちらのソースも同一の Xcode 互換イメージセットを生成します。必要に応じて選択してください。

ソースアイコン数要件最適な用途
Iconify API200 以上のコレクションから 275,000 件以上インターネット幅広い選択肢、特定スタイル、オープンソースアイコン
SF SymbolsApple シンボル 5,000 件以上macOS のみApple ネイティブスタイル、オフライン使用

2. 常に既存スタイルに合わせる

生成する前に、サイズ・色・ウェイトの一貫性について、プロジェクトの既存アイコンを確認してください。

3. 出力構造

どちらの方法も完全な Xcode イメージセットを生成します。

<output-dir>/<asset-name>.imageset/  Contents.json  <asset-name>.png        # 1x（デフォルト 68px）  <asset-name>@2x.png     # 2x（デフォルト 136px）  <asset-name>@3x.png     # 3x（デフォルト 204px）

使用例

ステップ 1: 要件の確認

アイコンのニーズを決定します。アイコンが表すもの、好みのスタイル、対象の色とサイズ。

プロジェクトにすでにアイコンがある場合は、既存スタイルを確認します。

bash
# 既存アイコンのサイズを確認sips -g pixelWidth -g pixelHeight path/to/[email protected]

ステップ 2: アイコンの検索

Iconify API（幅広い選択肢に推奨）:

bash
# すべてのコレクションを検索$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: プレビュー（オプション）

bash
# Iconify プレビュー$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline

ステップ 4: 生成

Iconify API:

bash
# 基本的な生成$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:

bash
# 基本的な生成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: 確認と統合

  1. 生成された @2x PNG を読み込んで視覚的に確認する
  2. 直接出力していない場合はアセットカタログにコピーする。
    bash
    cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
  3. プロジェクトをビルドして Xcode が新しいアセットを認識することを確認する

人気の Iconify コレクション

プレフィックス名前件数スタイル
mdiMaterial Design Icons7,400 件以上塗りつぶし＋アウトラインバリアント
phPhosphor9,000 件以上アイコンごとに 6 ウェイト
solarSolar7,400 件以上Bold、Linear、Outline
tablerTabler Icons6,000 件以上一定のストローク幅
lucideLucide1,700 件以上クリーン、ミニマル
riRemix Icon3,100 件以上塗りつぶし＋ラインバリアント
carbonCarbon2,400 件以上IBM デザイン言語
heroiconsHeroIcons1,200 件以上Tailwind CSS のコンパニオン

すべてを閲覧: https://icon-sets.iconify.design/

スクリプトリファレンス

スクリプトソースパス
iconify_gen.shIconify API（275,000 件以上のアイコン）$SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swiftSF Symbols（5,000 件以上のアイコン）$SKILL_DIR/scripts/generate_icons.swift

ベストプラクティス

  • 生成前に検索する -- 利用可能なアイコンを閲覧して最適なものを見つける
  • 既存プロジェクトスタイルに合わせる -- 新しいアイコンを生成する前に既存アイコンのサイズ・色・ウェイトを確認する
  • バラエティには Iconify を使う -- 200 以上のコレクションから必要なスタイルを見つけられる
  • Apple の一貫性には SF Symbols を使う -- システム UI と完全に一致する
  • アセットカタログに直接生成する -- 手動コピーを省略するため --output ./Assets.xcassets/icons を使う
  • 視覚的に確認する -- コミット前に必ず @2x PNG をプレビューする

アンチパターン

  • 既存プロジェクトのアイコンスタイルを確認せずにアイコンを生成する
  • プロジェクトに定義されたカラーパレットがあるのにデフォルトカラーを使う
  • 間違ったサイズで生成する（まず既存アイコンを確認する）
  • 視覚的確認なしに生成されたアイコンをコミットする

來源與署名

來源：affaan-m/ecc位於docs/ja-JP/skills/ios-icon-gen提交ef648e0

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 affaan-m/ecc 的技能

Vue Patterns

affaan-m

Vue 3 Composition API、元件架構、Pinia 狀態管理、Vue Router 與 Nuxt SSR 模式的參考指南。

Software Development275K3 天前更新

Uncloud

affaan-m

使用 uc CLI 管理 Uncloud 叢集的參考指南：部署服務、Caddy 入口、連接埠、擴縮與日誌。

DevOps & Cloud275K3 天前更新

Team Agent Orchestration

affaan-m

以團隊方式協調多個 AI 代理，運用工作項目、看板狀態、分支隔離與合併閘門。

AI & Agents275K3 天前更新

Tasteforge Video

affaan-m

Use for file-driven multimodal image, video, and 3D-asset discovery; taste interviews; distill or apply workflows; style-pack validation; editable EDL/FCPXML export; provenance audits; and offline planning that must fail closed before provider generation.

待分類275K3 天前更新

Taste

affaan-m

為音樂影片與短影音剪輯定義 angelcore / cloud-trance / hyperpop 視覺方向，包含氛圍、剪輯語法與對拍分鏡規劃。

Design & Creative275K3 天前更新

Social Publisher

affaan-m

透過 SocialClaw 工作區 API 在 13 個平台上排程與發佈社群媒體貼文。

Marketing & Sales275K3 天前更新

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative179K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative179K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative179K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新