iOS 图标生成器 是做什么的?
从两个来源生成用于 Xcode 资源目录的 PNG 图标集。
何时激活
- 为 iOS/macOS Xcode 项目生成图标资源
- 跨开源图标集搜索图标
- 为资源目录创建 PNG 图标集(1x、2x、3x)
- 用生产级质量图标替换占位图标
- 匹配 Xcode 项目中已有的图标样式
核心原则
1. 两个来源,统一输出格式
两个来源都生成兼容 Xcode 的 imageset。根据需要选择:
| 来源 | 图标数量 | 前提条件 | 适用场景 |
|---|---|---|---|
| Iconify API | 来自 200+ 图标集的 275,000+ | 互联网 | 广泛选择、特定样式、开源图标 |
| 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 路径/到/现有@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 应用或参考常用名称:
| 使用场景 | 符号名称 |
|---|---|
| 文档 | 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 路径/到/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
反模式
- 不检查现有项目图标样式就生成图标
- 项目有已定义调色板时使用默认颜色
- 在错误尺寸下生成(首先检查现有图标)
- 不进行视觉验证就提交生成的图标