Svg Icon Generator
Generate production-ready SVG icons and related visual assets without leaving the agent workflow.
Overview
Svg Icon Generator is an agent skill for the Build phase that produces and validates SVG icons for solo builders working on UI and visual content.
Install
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill svg-icon-generatorWhat is this skill?
- Auto-activates on phrases like "svg icon generator", "svg generator", and "svg"
- Step-by-step guidance plus production-oriented SVG output
- Part of the Visual Content skill family (diagrams, charts, presentations)
- Allowed tools: Read, Write, Edit, Bash, Grep for file-based icon workflows
- Version 1.0.0 in skill metadata
- Five allowed tool classes: Read, Write, Edit, Bash, Grep
Adoption & trust: 601 installs on skills.sh; 2.3k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need consistent SVG icons for your app or site but do not want to switch tools or guess path and viewBox conventions.
Who is it for?
Indie developers embedding icons in React, Vue, or static sites who want fast, agent-driven SVG generation in-repo.
Skip if: Complex brand illustration, animated Lottie-only pipelines, or teams that require a locked Figma-only design handoff with no generated assets.
When should I use this skill?
Triggers on: svg icon generator, svg icon generator; phrases like "svg icon generator", "svg generator", "svg".
What do I get? / Deliverables
You receive step-by-step guidance and ready-to-commit SVG icon files aligned with common web and app standards.
- SVG icon source files
- Validated SVG markup suitable for web or app bundlers
Recommended Skills
Journey fit
Icon generation is a Build-time frontend deliverable when you are assembling UI, design systems, or marketing surfaces. SVG icons ship with components, favicons, and app chrome—core frontend asset work.
How it compares
A focused SVG icon generator skill—not a general charting, slide deck, or raster image MCP server.
Common Questions / FAQ
Who is svg-icon-generator for?
Solo builders and plugin users on Claude Code who need lightweight SVG icons as part of frontend or visual content work.
When should I use svg-icon-generator?
During Build when adding UI chrome, favicons, or design-system glyphs—trigger with "svg icon generator" or "svg generator" in your request.
Is svg-icon-generator safe to install?
It requests Read, Write, Edit, and Bash; review the Security Audits panel on this page and restrict Bash scope in sensitive repos.
SKILL.md
READMESKILL.md - Svg Icon Generator
# 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