Communitygithub.com

iOS 图标生成器

从 SF Symbols(5000+ Apple 原生图标)或 Iconify API(来自 200+ 图标集的 275k+ 开源图标)生成用于 Xcode 资源目录的 PNG 图标集。适用于图标生成、创建图标资源、向资源目录添加图标或为 iOS 项目搜索图标的场景。

iOS 图标生成器 是什么?

iOS 图标生成器是一个 AI 智能体技能,旨在简化为 Xcode 项目生成 PNG 图标集的过程。它支持两个主要图标来源:Iconify API(提供超过 275,000 个开源图标,涵盖 200 多个图标集)和 Apple SF Symbols(提供 5,000 多个 Apple 原生符号,仅限 macOS 使用)。该技能可生成完整的 Xcode imageset 目录结构,自动生成 1x、2x 和 3x 尺寸的 PNG 文件,并支持通过命令行选项自定义颜色、尺寸和权重。它允许开发者直接搜索、预览图标,并将其输出到资源目录中,同时提供一致性检查,确保与项目中已有图标的样式匹配。该技能通过 `iconify_gen.sh` 和 `generate_icons.swift` 脚本运行,无需额外安装,但 Iconify 来源需要互联网连接。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/ECC/tree/main/skills/ios-icon-gen

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

iOS 图标生成器 是做什么的?

从两个来源生成用于 Xcode 资源目录的 PNG 图标集。

何时激活

  • 为 iOS/macOS Xcode 项目生成图标资源
  • 跨开源图标集搜索图标
  • 为资源目录创建 PNG 图标集(1x、2x、3x)
  • 用生产级质量图标替换占位图标
  • 匹配 Xcode 项目中已有的图标样式

核心原则

1. 两个来源,统一输出格式

两个来源都生成兼容 Xcode 的 imageset。根据需要选择:

来源图标数量前提条件适用场景
Iconify API来自 200+ 图标集的 275,000+互联网广泛选择、特定样式、开源图标
SF Symbols5,000+ Apple 符号仅限 macOSApple 原生样式、离线使用

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:验证并集成

  1. 读取生成的 @2x PNG 进行视觉验证
  2. 如果没有直接输出到资源目录,则复制到资源目录:
    cp -r /tmp/icons/<名称>.imageset 路径/到/Assets.xcassets/<分组>/
    
  3. 构建项目,验证 Xcode 是否识别新资源

热门 Iconify 图标集

前缀名称数量风格
mdiMaterial Design Icons7400+填充 + 轮廓变体
phPhosphor9000+每个图标 6 种线宽
solarSolar7400+粗体、线性、轮廓
tablerTabler Icons6000+一致的笔画宽度
lucideLucide1700+简洁、极简
riRemix Icon3100+填充 + 线条变体
carbonCarbon2400+IBM 设计语言
heroiconsHeroIcons1200+Tailwind CSS 伴侣

浏览全部:https://icon-sets.iconify.design/

脚本参考

脚本来源路径
iconify_gen.shIconify API(275k+ 图标)$SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swiftSF Symbols(5k+ 图标)$SKILL_DIR/scripts/generate_icons.swift

最佳实践

  • 生成前先搜索 -- 浏览可用图标,找到最佳匹配
  • 匹配现有项目样式 -- 生成新图标前检查现有图标的尺寸、颜色和线宽
  • 使用 Iconify 获取多样性 -- 200+ 图标集意味着你可以找到所需的确切样式
  • 使用 SF Symbols 保持 Apple 一致性 -- 它们与系统 UI 完美匹配
  • 直接生成到资源目录 -- 使用 --output ./Assets.xcassets/icons 跳过手动复制
  • 视觉验证 -- 提交前始终预览 @2x PNG

反模式

  • 不检查现有项目图标样式就生成图标
  • 项目有已定义调色板时使用默认颜色
  • 在错误尺寸下生成(首先检查现有图标)
  • 不进行视觉验证就提交生成的图标

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/content-engine

Create platform-native content systems for X, LinkedIn, TikTok, YouTube, newsletters, and repurposed multi-platform campaigns. Use when the user wants social posts, threads, scripts, content calendars, or one source asset adapted cleanly across platforms.

affaan-m/ECC

Multi-platform content distribution across X, LinkedIn, Threads, and Bluesky. Adapts content per platform using content-engine patterns. Never posts identical content cross-platform. Use when the user wants to distribute content across social platforms.

affaan-m/fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

affaan-m/manim-video

日本語翻訳:このファイルは manim-video 用の日本語翻訳が必要です

affaan-m/remotion-video-creation

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

affaan-m/video-editing

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

agent-self-evaluation

Use after completing any non-trivial task. The agent self-rates its output on 5 axes — accuracy, completeness, clarity, actionability, conciseness — with concrete evidence per criterion. Produces a structured 1-5 scorecard with specific improvement suggestions.

agent-sort

Build an evidence-backed ECC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using parallel repo-aware review passes. Use when ECC should be trimmed to what a project actually needs instead of loading the full bundle.

ai-first-engineering

Engineering operating model for teams where AI agents generate a large share of implementation output. Use when setting team process, review gates, or ownership rules for a codebase largely written by agents.

ai-regression-testing

Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots where the same model writes and reviews code. Use when adding regression coverage to AI-assisted code, or when the same model both wrote and reviewed a change.

android-clean-architecture

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project.

angular-developer

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

相关技能