ios-icon-gen

iOS Icon Generator

为 Xcode 资源目录从两种图标源生成 PNG 格式的图标集（imagesets）。

适用场景

• 为 iOS/macOS Xcode 项目生成图标资源
• 在开源图标库中检索合适的图标
• 为 Asset Catalog 创建 1x、2x、3x 规格的 PNG 图标集
• 将占位图标替换为生产级别的设计资源
• 匹配 Xcode 项目中现有的图标设计风格

核心原则

1. 两种数据源，统一输出格式

两种来源均能生成完全符合 Xcode 规范的 imageset，可按需选择：

图标来源	图标数量	环境要求	最适合场景
Iconify API	200+ 图标集，27.5万+ 图标	需要联网	图标选择丰富、特定视觉风格、开源图标
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 Name)
文档	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	7400+	填充（Filled）与轮廓（Outline）变体
ph	Phosphor	9000+	单图标提供 6 种粗细（Weight）
solar	Solar	7400+	粗体、线性、轮廓风格
tabler	Tabler Icons	6000+	描边宽度统一
lucide	Lucide	1700+	清爽极简风格
ri	Remix Icon	3100+	实心（Filled）与线条（Line）双风格
carbon	Carbon	2400+	IBM 设计语言
heroicons	HeroIcons	1200+	Tailwind CSS 官方配套图标库

在线浏览全量图标库：https://icon-sets.iconify.design/

脚本参考

脚本名称	对应数据源	脚本路径
iconify_gen.sh	Iconify API（27.5万+ 图标）	$SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swift	SF Symbols（5000+ 图标）	$SKILL_DIR/scripts/generate_icons.swift

最佳实践

• 先搜索再生成：在丰富图标集中先搜索预览，挑选最契合的样式。
• 与现有风格对齐：生成前先检查项目中已有图标的尺寸、色值与线宽。
• 需要多样风格用 Iconify：涵盖 200+ 不同设计语言的图标集，应对各种定制风格。
• 要求 Apple 原生感用 SF Symbols：与系统级 UI 保持高度一致。
• 直接生成到 Asset Catalog：利用 --output ./Assets.xcassets/icons 步到位，省去手动移动文件的步骤。
• 必须做视觉校验：代码提交前，务必预览确认生成的 @2x PNG 效果。

常见误区

• 未核对项目现有图标风格就直接生成新图标
• 项目有明确的主题配色，却直接使用默认颜色
• 生成错误的尺寸规格（未提前检查原有图标的 pt 尺寸）
• 生成资源后未经过视觉预览校验就直接提交到代码库