playbooks

home / skills / jeremylongshore / claude-code-plugins-plus-skills / svg-icon-generator

svg-icon-generator skill

/skills/18-visual-content/svg-icon-generator

This skill helps automate svg icon generator tasks, delivering step-by-step guidance, production-ready code, and validation aligned with best practices.

npx playbooks add skill jeremylongshore/claude-code-plugins-plus-skills --skill svg-icon-generator

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.1 KB
---
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]>"
---

# 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

Overview

This skill automates SVG icon generator tasks for Visual Content workflows. It guides creation, validation, and production-ready SVG icon code and configurations. Use it to streamline icon design, enforce best practices, and produce consistent assets for UI and documentation.

How this skill works

The skill listens for activation phrases like "svg icon generator" and analyzes the requested icon purpose, size, and style. It generates SVG markup, configuration snippets, and step-by-step instructions, then runs simple validations against common SVG standards and accessibility checks. Outputs include ready-to-use SVG files, code examples, and remediation suggestions when issues are found.

When to use it

  • You need consistent, production-ready SVG icons for interfaces or documentation
  • You want automated generation of SVG markup from parameters (size, stroke, fill, viewBox)
  • You need accessibility and optimization guidance for SVG assets
  • You are creating icon sets with consistent style and naming conventions
  • You want validation and basic linting for generated SVG files

Best practices

  • Define a clear icon system: standard sizes, stroke widths, and viewBox values
  • Prefer simple single-path icons for easier scaling and optimization
  • Include title and aria-hidden attributes as appropriate for accessibility
  • Optimize output with tools (SVGO) and remove unnecessary metadata
  • Use semantic naming and version-controlled icon sets for reuse

Example use cases

  • Generate a 24x24 outline user icon with customizable stroke color
  • Produce a compact icon set for a dashboard with consistent viewBox and padding
  • Validate and optimize legacy SVGs for performance and accessibility
  • Create code snippets for embedding icons inline in HTML or React components
  • Automate batch generation of variants (filled, outline, colored) from a master shape

FAQ

What inputs does the generator accept?

Provide icon name, dimensions, stroke/fill options, and whether you want accessibility attributes and optimization enabled.

Can it produce framework-specific snippets?

Yes. The skill can output plain SVG markup and wrappers for common frameworks like React or plain HTML snippets on request.