svg-optimizer
Optimize SVG assets, generate sprites, and convert to React components
Best use case
svg-optimizer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Optimize SVG assets, generate sprites, and convert to React components
Teams using svg-optimizer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/svg-optimizer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How svg-optimizer Compares
| Feature / Agent | svg-optimizer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Optimize SVG assets, generate sprites, and convert to React components
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# SVG Optimizer Skill
## Purpose
Optimize SVG assets for web and mobile use, including compression, sprite generation, and React component conversion.
## Capabilities
- Remove unnecessary metadata and comments
- Optimize paths and shapes
- Generate SVG sprites for icon systems
- Convert SVGs to React/Vue components
- Minify SVG file sizes
- Ensure accessibility attributes (aria-labels, roles)
- Generate icon documentation
## Target Processes
- component-library.js (iconSystemDesignTask)
- design-system.js
## Integration Points
- SVGO for optimization
- svgr for React component generation
- svg-sprite for sprite generation
## Input Schema
```json
{
"type": "object",
"properties": {
"inputPath": {
"type": "string",
"description": "Path to SVG file or directory"
},
"outputPath": {
"type": "string",
"description": "Output directory"
},
"generateSprite": {
"type": "boolean",
"default": false
},
"generateComponents": {
"type": "boolean",
"default": false
},
"componentFormat": {
"type": "string",
"enum": ["react", "vue", "svelte"],
"default": "react"
},
"optimizationLevel": {
"type": "string",
"enum": ["minimal", "standard", "aggressive"],
"default": "standard"
},
"addAccessibility": {
"type": "boolean",
"default": true
}
},
"required": ["inputPath"]
}
```
## Output Schema
```json
{
"type": "object",
"properties": {
"optimizedFiles": {
"type": "array",
"description": "List of optimized SVG files"
},
"spritePath": {
"type": "string",
"description": "Path to generated sprite file"
},
"componentPaths": {
"type": "array",
"description": "Paths to generated components"
},
"sizeSavings": {
"type": "object",
"description": "File size reduction statistics"
},
"accessibilityReport": {
"type": "object",
"description": "Accessibility attributes added"
}
}
}
```
## Usage Example
```javascript
const result = await skill.execute({
inputPath: './icons',
outputPath: './optimized-icons',
generateSprite: true,
generateComponents: true,
componentFormat: 'react',
addAccessibility: true
});
```Related Skills
doe-optimizer
Skill for optimizing experimental designs using DOE principles
circuit-optimizer
Quantum circuit optimization skill for gate reduction, depth minimization, and hardware-aware compilation
nanoparticle-synthesis-optimizer
Synthesis parameter optimization skill for metal, semiconductor, and oxide nanoparticle production with automated protocol generation and reproducibility validation
drug-encapsulation-optimizer
Drug delivery formulation skill for optimizing drug loading, encapsulation efficiency, and release kinetics
warehouse-slotting-optimizer
Warehouse slotting and layout optimization skill for pick path minimization and space utilization.
network-optimizer
Network optimization skill for transportation, assignment, and flow problems on graph structures.
facility-layout-optimizer
Facility layout optimization skill for material flow minimization and space utilization.
signal-timing-optimizer
Traffic signal timing optimization skill for cycle length, phasing, and coordination
scaffold-design-optimizer
Tissue engineering scaffold design optimization skill for pore size, porosity, and mechanical properties
prosthetics-design-optimizer
Prosthetics and orthotics design optimization skill integrating biomechanical requirements with manufacturing constraints
inventory-optimizer
Inventory management optimization skill with safety stock calculation, reorder point determination, and ABC analysis
changeover-optimizer
Setup and changeover time reduction skill with SMED methodology and sequence optimization