✓ Verified 💻 Development ✓ Enhanced Data

Sfsymbol Generator

Generate an Xcode SF Symbol asset catalog .symbolset.

Rating: 4.5 (444 reviews)
Downloads: 49,995 downloads
Version: 1.0.0

Overview

Generate an Xcode SF Symbol asset catalog .symbolset.

Complete Documentation

View Source →

SF Symbol Generator

Usage

You can override the default asset catalog location with SFSYMBOL_ASSETS_DIR.

Raw symbolset (no template injection)

bash

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

symbol-name: Full symbol name (e.g., custom.logo, brand.icon.fill).
svg-path: Path to the source SVG file.
assets-dir (optional): Path to Assets.xcassets/Symbols (defaults to Assets.xcassets/Symbols or SFSYMBOL_ASSETS_DIR).

Template-based symbolset (recommended)

bash

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

template-svg (optional): SF Symbols template SVG to inject into (defaults to the first .symbolset SVG found in Assets.xcassets/Symbols, otherwise uses the bundled skill template).

Example

bash

./scripts/generate-from-template.js pi.logo /Users/admin/Desktop/pi-logo.svg

Requirements

SVG must include a viewBox.
Use path-based shapes (paths are required; rects are supported and converted, but other shapes should be converted to paths).
Prefer filled shapes (no strokes) to avoid thin artifacts.

Workflow

Validates the SVG path and viewBox.
Computes path bounds and centers within the SF Symbols template margins.
Injects the paths into the SF Symbols template (Ultralight/Regular/Black).
Creates .symbolset inside the asset catalog Symbols folder.
Writes a matching Contents.json.

Installation

Terminal bash


openclaw install sfsymbol-generator

Copied!

💻Code Examples

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

scriptsgeneratesh-symbol-name-svg-path-assets-dir.txt

- `symbol-name`: Full symbol name (e.g., `custom.logo`, `brand.icon.fill`).
- `svg-path`: Path to the source SVG file.
- `assets-dir` (optional): Path to `Assets.xcassets/Symbols` (defaults to `Assets.xcassets/Symbols` or `SFSYMBOL_ASSETS_DIR`).

### Template-based symbolset (recommended)

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

scriptsgenerate-from-templatejs-symbol-name-svg-path-template-svg-assets-dir.txt

- `template-svg` (optional): SF Symbols template SVG to inject into (defaults to the first `.symbolset` SVG found in `Assets.xcassets/Symbols`, otherwise uses the bundled skill template).

## Example