iOS 圖示產生器 是做什麼的？
從兩個來源為 Xcode 素材目錄產生 PNG 圖示 imageset。
何時啟用
- 為 iOS/macOS Xcode 專案產生圖示資產
- 跨開源收藏集搜尋圖示
- 為素材目錄建立 PNG imageset（1x, 2x, 3x）
- 將佔位符圖示替換為生產品質資產
- 比對 Xcode 專案中現有圖示的風格
核心原則
1. 兩個來源，同一輸出格式
兩個來源皆產生完全相容 Xcode 的 imageset。根據需求選擇：
| 來源 | 圖示數量 | 需求條件 | 最適合情境 |
|---|---|---|---|
| Iconify API | 275,000+ 個，來自 200+ 收藏集 | 需要網路連線 | 廣泛選擇、特定風格、開源圖示 |
| SF Symbols | 5,000+ 個 Apple 符號 | 僅限 macOS | Apple 原生風格、離線使用 |
2. 始終比對現有風格
在產生之前，請檢查專案中現有圖示的尺寸、顏色與粗細一致性。
3. 輸出結構
兩種方法皆產生完整的 Xcode imageset：
<輸出目錄>/<資產名稱>.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 "收據"
# 在特定收藏集內搜尋
$SKILL_DIR/scripts/iconify_gen.sh search "名片" --prefix mdi
# 列出可用收藏集
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols（適用於 Apple 原生風格）： 瀏覽 SF Symbols app 或參考常見名稱：
| 使用情境 | 符號名稱 |
|---|---|
| 文件 | 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 <點數>（預設：68）、--color <十六進位色碼>（預設：8E8E93）、--output <目錄>（預設：/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 <點數>（預設：68）、--color <十六進位色碼>（預設：8E8E93）、--weight <名稱>（預設：thin）、--output <目錄>（預設：/tmp/icons）
步驟 5：驗證與整合
- 讀取產生的 @2x PNG 以視覺驗證
- 若未直接輸出至素材目錄，請手動複製：
cp -r /tmp/icons/<名稱>.imageset path/to/Assets.xcassets/<群組>/ - 建置專案以確認 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+ 收藏集讓你能找到所需的確切風格
- 使用 SF Symbols 以保持 Apple 一致性 — 它們與系統 UI 完美匹配
- 直接產生到素材目錄 — 使用
--output ./Assets.xcassets/icons跳過手動複製 - 視覺驗證 — 在提交前務必預覽 @2x PNG
反模式
- 在未檢查現有專案圖示風格的情況下產生圖示
- 當專案有定義的調色盤時仍使用預設顏色
- 以錯誤尺寸產生圖示（先檢查現有圖示）
- 未經視覺驗證即提交產生的圖示