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 toAssets.xcassets/Symbols(defaults toAssets.xcassets/SymbolsorSFSYMBOL_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.symbolsetSVG found inAssets.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
<symbol-name>.symbolsetinside the asset catalog Symbols folder. - •Writes a matching
Contents.json.