Skill

sfsymbol-generator

From sundial-org-awesome-openclaw-skills-4

Generates Xcode SF Symbol .symbolset asset catalogs from SVGs for custom build-time icons, creating symbolset folder, Contents.json, and files.

iOS

Swift

mobile

Install

npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-2 --plugin sundial-org-awesome-openclaw-skills-4

Tool Access

This skill uses the workspace's default tool permissions.

Preview

You can override the default asset catalog location with `SFSYMBOL_ASSETS_DIR`.

Supporting Assets

assets/template.svgscripts/generate-from-template.jsscripts/generate.sh

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars586

Forks75

Last CommitFeb 1, 2026

Actions

View Source View Plugin View on GitHub View README

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.