sfsymbol-generator
Generate an Xcode SF Symbol asset catalog .symbolset from an SVG. Use when you need to add a custom SF Symbol (build-time) by creating the symbolset folder, Contents.json, and SVG file.
Why use this skill?
Easily convert custom SVG icons into native Xcode .symbolset assets. The sfsymbol-generator automates metadata and directory creation for your iOS and macOS projects.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/svkozak/sfsymbol-generatorWhat This Skill Does
The sfsymbol-generator skill is a specialized developer-tool designed to streamline the integration of custom vector icons into Xcode projects. It automates the complex process of creating Apple's native .symbolset structure, which is required for custom SF Symbols. By taking a raw SVG file as input, the skill handles the necessary transformations, including path normalization, centering, and the generation of the required Contents.json metadata file. It supports both a direct generation method and a template-based approach that ensures your custom icons align perfectly with Apple’s official design standards for weight and scale.
Installation
To integrate this skill into your environment, use the OpenClaw CLI to pull the source code directly from the repository:
clawhub install openclaw/skills/skills/svkozak/sfsymbol-generator
Ensure that your local environment has the necessary write permissions to the target Xcode Assets.xcassets directory, as the skill performs folder creation and file writing operations to construct the symbolset directory structure.
Use Cases
This skill is essential for iOS and macOS developers who need to implement brand-specific iconography while maintaining full support for SF Symbol features like variable color and dynamic type scaling. It is best utilized when building custom design systems where standard Apple symbols are insufficient. Use it to automate the migration of flat SVG icons from design tools like Figma or Sketch into project-ready assets without manual XML editing.
Example Prompts
- "Use sfsymbol-generator to create a new symbol named 'brand.logo.fill' using the file at ~/Downloads/logo.svg."
- "Generate an SF Symbol for 'company.auth' from /path/to/icon.svg using my project template and save it to Assets.xcassets/Symbols."
- "Convert my custom SVG icon into a full .symbolset package named 'nav.dashboard' using the default template."
Tips & Limitations
The most critical requirement for this skill is the structure of the source SVG. To achieve the best results, ensure your SVG uses path-based geometry; if your icon contains complex groups or transforms, it is highly recommended to 'Flatten' or 'Outline Path' in your vector editor before running the command. The skill functions best with filled shapes rather than stroked paths, as strokes can often lead to rendering artifacts or scaling issues when applied to varied SF Symbol weights. If the generated icon appears misaligned, ensure your source SVG includes a clear, square viewBox to allow the automation logic to correctly center the geometry within the symbol container.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-svkozak-sfsymbol-generator": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution