iOS图标生成器 是做什么的?
从两个来源为Xcode资源目录生成PNG图标集。
何时启用
- 为iOS/macOS Xcode项目生成图标资源
- 在开源图标集中搜索图标
- 为资源目录创建PNG图标集(1x、2x、3x)
- 将占位符图标替换为生产级资源
- 匹配Xcode项目中已有的图标样式
核心原则
1. 两个来源,统一输出格式
两个来源都生成完全兼容Xcode的图标集。根据需求选择:
| 来源 | 图标数量 | 依赖 | 最佳用途 |
|---|---|---|---|
| Iconify API | 来自200+图标集的27.5万+个图标 | 联网 | 广泛的选择、特定风格、开源图标 |
| SF Symbols | 5000+个Apple符号 | 仅macOS | Apple原生风格、离线使用 |
2. 始终匹配现有样式
在生成前,检查项目现有图标的尺寸、颜色和粗细,保持一致性。
3. 输出结构
两种方法都生成完整的Xcode图标集:
<输出目录>/<资源名称>.imageset/
Contents.json
<资源名称>.png # 1x(默认68px)
<资源名称>@2x.png # 2x(默认136px)
<资源名称>@3x.png # 3x(默认204px)
示例
第一步:评估需求
确定图标需求:图标表示什么、首选风格、目标颜色和尺寸。
如果项目已有图标,检查现有样式:
# 检查现有图标的尺寸
sips -g pixelWidth -g pixelHeight 路径/到/已有@2x.png
第二步:搜索图标
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 |
第三步:预览(可选)
# Iconify预览
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
第四步:生成
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)
第五步:验证并集成
- 读取生成的@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(27.5万+个图标) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols(5000+个图标) | $SKILL_DIR/scripts/generate_icons.swift |
最佳实践
- 先生成前搜索 -- 浏览可用图标,找到最佳匹配
- 匹配项目现有样式 -- 生成前检查现有图标的尺寸、颜色和粗细
- 使用Iconify获得多样性 -- 200+个图标集意味着你能找到精确需要的风格
- 使用SF Symbols保持Apple一致性 -- 它们与系统UI完美匹配
- 直接生成到资源目录 -- 使用
--output ./Assets.xcassets/icons跳过手动复制 - 视觉验证 -- 在提交前始终预览@2x PNG
反模式
- 在未检查项目现有图标样式的情况下生成图标
- 当项目有定义好的调色板时仍使用默认颜色
- 以错误尺寸生成(先检查现有图标)
- 提交生成的图标前未进行视觉验证