Sfsymbol生成

技能简介

该技能将SVG矢量图转换为Xcode可用的SF Symbol资源目录（.symbolset），支持直接注入官方模板或生成原始符号集，便于在Apple生态应用中使用自定义图标。

业务背景

iOS/macOS开发团队常需将品牌图标融入Apple原生界面，但SF Symbols官方库无法满足定制化需求。该工具打通设计到开发的最后一公里，让设计师输出的SVG直接变为Xcode可用的符号资源，无需手动调整坐标、边距或多档粗细，显著缩短图标上线周期。

落地案例：某金融App需将自研的风险等级图标纳入Tab栏，传统方式需设计师导出多尺寸PNG或手工编辑Symbol模板。使用该生成器后，上传单份SVG即可自动产出Ultralight/Regular/Black三档符号集，配置好Contents.json后直接拖入Xcode Assets，开发当天完成替换，图标在不同模式与动态字号下均保持清晰锐利。

能做什么

• 从SVG自动生成完整的.symbolset文件夹结构
• 创建配套的Contents.json配置文件
• 将自定义路径注入SF Symbols标准模板（Ultralight/Regular/Black三档）
• 自动计算路径边界并居中适配模板边距
• 支持通过环境变量指定资源目录位置

使用说明

安装步骤

1. 克隆技能仓库到本地工作区
2. 确保系统已安装Node.js运行环境
3. 进入技能目录：cd skills/svkozak/sfsymbol-generator
4. 赋予脚本执行权限：chmod +x scripts/*.sh scripts/*.js

基础用法

方式一：原始符号集（无模板注入）

./scripts/generate.sh <symbol-name> <svg-path> [assets-dir]

方式二：模板注入（推荐）

./scripts/generate-from-template.js <symbol-name> <svg-path> [template-svg] [assets-dir]

可通过环境变量覆盖默认路径：export SFSYMBOL_ASSETS_DIR=/path/to/your/Assets.xcassets/Symbols

输入与输出

见下方输入与输出表格。

风险提示

• SVG必须包含viewBox属性，否则无法处理
• 仅支持path路径形状，矩形会被转换，其他形状需提前转为路径
• 建议使用填充图形而非描边，以避免细线伪影
• 生成的符号集需手动添加到Xcode项目才能生效

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/svkozak/sfsymbol-generator/SKILL.md
来源类型：GitHub开源技能

常见问题

Q1：Sfsymbol生成 适合哪些场景？
A：适合需要「技能简介 该技能将SVG矢量图转换为Xcode可用的SF Symbol资」的场景，尤其是希望快速验证并落地的团队与个人。

Q2：第一次使用应该先做什么？
A：先明确目标任务，再按照页面中的“能做什么”和“使用说明”完成最小可行流程。

Q3：如何判断是否值得长期使用？
A：建议连续使用 1-2 周，对比效率、稳定性和协作成本，再决定是否纳入长期工具栈。

替代方案

可结合同分类工具进行横向对比，优先选择与你任务最贴合的方案。

相关推荐

可从本页下方“相关技能”继续扩展。