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 "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 <目錄>（預設：/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 <名稱>（預設：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
反模式
- 在未檢查現有專案圖示風格的情況下產生圖示
- 當專案有定義的調色盤時仍使用預設顏色
- 以錯誤的尺寸產生（先檢查現有圖示）
- 未進行視覺驗證就提交產生的圖示