SF Symbol generator: Development & Code Tools for Claude Code | AI Skill Market | AI Skill Market

SF Symbol generator: Development & Code Tools for Claude Code | AI Skill Market | AI Skill Market

SF Symbol Generator

Usage

You can override the default asset catalog location with

SFSYMBOL_ASSETS_DIR

.

Raw symbolset (no template injection)

./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)

./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

./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>.symbolset
```
inside the asset catalog Symbols folder.
Writes a matching
```
Contents.json
```
.