AI Skills
ios-icon-gen

ios-icon-gen

熱門

從 SF Symbols（5,000+ 原生 Apple 圖示）或 Iconify API（來自 200+ 個圖示集的 275,000+ 開源圖示）生成 Xcode Asset Catalog 所需的 PNG 圖示圖像集 (imageset)。適用於生成圖示、建立圖示資源、新增圖示至 Asset Catalog，或為 iOS 專案搜尋圖示等情境。

24萬星標
3.6萬分支
更新於 2026/7/29
獲取技能源代碼

相關技能

store-data-structures8.2萬design11萬imagegen-frontend-mobile4.8萬
SKILL.md
唯讀
名稱
ios-icon-gen
描述

從 SF Symbols（5,000+ 原生 Apple 圖示）或 Iconify API（來自 200+ 個圖示集的 275,000+ 開源圖示）生成 Xcode Asset Catalog 所需的 PNG 圖示圖像集 (imageset)。適用於生成圖示、建立圖示資源、新增圖示至 Asset Catalog，或為 iOS 專案搜尋圖示等情境。

iOS 圖示生成器

從兩種來源生成 Xcode Asset Catalog 所需的 PNG 圖示圖像集 (imageset)。

觸發時機

  • 為 iOS/macOS Xcode 專案生成圖示資源時
  • 在各開源圖示集中搜尋圖示時
  • 為 Asset Catalog 建立 PNG 圖像集（1x、2x、3x）時
  • 將占位圖示替換為正式生產等級的資源時
  • 需符合 Xcode 專案現有圖示風格時

核心原則

1. 兩種來源，統一輸出格式

兩種來源皆可生成完全相容於 Xcode 的圖像集。請依需求選擇：

來源 圖示數量 需求條件 最佳適用情境
Iconify API 200+ 個圖示集，共 275,000+ 個 網路連線 需多樣化選擇、特定風格、開源圖示
SF Symbols 5,000+ 個 Apple 圖示 僅限 macOS 原生 Apple 風格、離線使用

2. 務必延續既有風格

生成圖示前，請先檢查專案中既有圖示的尺寸、顏色與字型粗細（weight），以確保風格一致。

3. 輸出結構

兩種方式皆會產生完整的 Xcode imageset：

<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：評估需求

確認圖示需求：代表意涵、偏好風格、目標顏色及尺寸。

若專案中已有圖示，請先檢查既有風格：

# 檢查既有圖示的像素尺寸
sips -g pixelWidth -g pixelHeight path/to/existing@2x.png

步驟 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 App 瀏覽，或參考常用名稱：

使用情境 Symbol 名稱
文件 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：驗證與整合

  1. 檢視生成的 @2x PNG 圖檔，進行視覺確認
  2. 若未直接輸出至 Asset Catalog，請複製至目標路徑：
    cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
  3. 建置專案，確認 Xcode 成功載入新資源

熱門 Iconify 圖示集

前綴 名稱 數量 風格
mdi Material Design Icons 7,400+ 填色與輪廓變體
ph Phosphor 9,000+ 每款圖示包含 6 種字重
solar Solar 7,400+ 粗體、線條、輪廓
tabler Tabler Icons 6,000+ 筆劃粗細一致
lucide Lucide 1,700+ 簡潔、極簡
ri Remix Icon 3,100+ 填色與線條變體
carbon Carbon 2,400+ IBM 設計語言
heroicons HeroIcons 1,200+ Tailwind CSS 搭配夥伴

瀏覽完整列表：https://icon-sets.iconify.design/

腳本參考說明

腳本 來源 路徑
iconify_gen.sh Iconify API（275,000+ 個圖示） $SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swift SF Symbols（5,000+ 個圖示） $SKILL_DIR/scripts/generate_icons.swift

最佳實踐

  • 生成前先搜尋 -- 瀏覽現有圖示以找到最合適的款式
  • 延續既有專案風格 -- 生成新圖示前，先確認現有圖示的尺寸、顏色與字重
  • 使用 Iconify 取得豐富樣式 -- 擁有 200+ 個圖示集，能精準找到所需風格
  • 使用 SF Symbols 保持 Apple 原生一致性 -- 與系統 UI 完美相容
  • 直接生成至 Asset Catalog -- 使用 --output ./Assets.xcassets/icons 即可免去手動複製的步驟
  • 視覺確認 -- 送出程式碼前，務必先預覽 @2x PNG 檔案

反模式（應避免的做法）

  • 未確認專案既有圖示風格就直接生成圖示
  • 專案已有明確配色方案，卻直接使用預設顏色
  • 生成錯誤尺寸的圖示（應先檢查既有圖示）
  • 未經視覺檢查確認就把生成的圖示 commit 送出