svg-icon-generator — Claude Code skill: generate SVG icons
A skill for SVG icon work: it walks the agent through the steps, writes the code and checks the output. Turns on by itself when your request mentions svg.
npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a claude-codeWhat svg-icon-generator does
This skill sits in the Visual Content category and targets SVG icon tasks. It fires on its own when a request contains "svg icon generator", "svg generator" or just "svg". The agent then follows the skill's instructions: break the job into steps, produce code and configs, compare the result against common standards.
Inside you get a set of instructions plus an error table. Three cases are covered: an invalid configuration caused by missing required fields, a missing tool caused by an uninstalled dependency, and a permission denial caused by insufficient access. The skill is allowed Read, Write, Edit, Grep and Bash(cmd:*), so it can open files, edit them and run commands.
Worth installing if you build interface icons often and would rather not re-explain the task to the agent every time. Compatibility is stated for Claude, while the installer also covers other platforms. No external service or key is involved — everything happens on your project files.
What it helps with
- generate a set of SVG icons for an interface
- make scattered icons follow one visual style
- get a step-by-step plan for visual asset work
- debug an icon that will not render in the project
- check SVG markup before committing
Example prompts for the agent
- Generate a trash SVG icon matching the style of the files in
assets/icons - Review my SVG icons and tell me what is wrong with the markup
- Help me with svg icon generator: I need a set of icons for the nav bar
How to install svg-icon-generator
1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a claude-code2Manually: put the files in place
~/.claude/skills/svg-icon-generator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svg-icon-generator/
1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a codex2Manually: put the files in place
.agents/skills/svg-icon-generator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a cursor2Manually: put the files in place
.cursor/skills/svg-icon-generator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install jeremylongshore/tons-of-skills-marketplace svg-icon-generator2Manually: put the files in place
.github/skills/svg-icon-generator/SKILL.md1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a gemini-cli2Platform CLI
gemini skills install https://github.com/jeremylongshore/tons-of-skills-marketplace --path skills/18-visual-content/svg-icon-generatorManually: put the files in place
.devin/skills/svg-icon-generator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about svg-icon-generator
How do I install svg-icon-generator in Claude Code?
Run npx skills add jeremylongshore/tons-of-skills-marketplace --skill svg-icon-generator -a claude-code. The skill file then lands at ~/.claude/skills/svg-icon-generator/SKILL.md.
What does svg-icon-generator do?
It guides the agent through SVG icon work: step-by-step instructions, generated code and configs, plus a validation pass. It activates on its own when svg appears in your request.
Does it need an API key or an external service?
No. Access to project files is enough — the skill works with Read, Write, Edit, Grep and Bash(cmd:*).
Source text
SKILL.md · MIT
--- name: svg-icon-generator description: 'Generate svg icon generator operations. Auto-activating skill for Visual Content. Triggers on: svg icon generator, svg icon generator Part of the Visual Content skill category. Use when working with svg icon generator functionality. Trigger with phrases like "svg icon generator", "svg generator", "svg". ' allowed-tools: Read, Write, Edit, Bash(cmd:*), Grep version: 1.0.0 license: MIT author: Jeremy Longshore <[email protected]> tags: - design - content compatibility: Designed for Claude Code --- # Svg Icon Generator ## Overview This skill provides automated assistance for svg icon generator tasks within the Visual Content domain. ## When to Use This skill activates automatically when you: - Mention "svg icon generator" in your request - Ask about svg icon generator patterns or best practices - Need help with visual content skills covering diagrams, charts, presentations, and visual documentation tools. ## Instructions 1. Provides step-by-step guidance for svg icon generator 2. Follows industry best practices and patterns 3. Generates production-ready code and configurations 4. Validates outputs against common standards ## Examples **Example: Basic Usage** Request: "Help me with svg icon generator" Result: Provides step-by-step guidance and generates appropriate configurations ## Prerequisites - Relevant development environment configured - Access to necessary tools and services - Basic understanding of visual content concepts ## Output - Generated configurations and code - Best practice recommendations - Validation results ## Error Handling | Error | Cause | Solution | |-------|-------|----------| | Configuration invalid | Missing required fields | Check documentation for required parameters | | Tool not found | Dependency not installed | Install required tools per prerequisites | | Permission denied | Insufficient access | Verify credentials and permissions | ## Resources - Official documentation for related tools - Best practices guides - Community examples and tutorials ## Related Skills Part of the **Visual Content** skill category. Tags: diagrams, mermaid, charts, visualization, presentations
© Jeremy Longshore · MIT · jeremylongshore/tons-of-skills-marketplace
