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
{
"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
{
"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
const result = await skill.execute({
inputPath: './icons',
outputPath: './optimized-icons',
generateSprite: true,
generateComponents: true,
componentFormat: 'react',
addAccessibility: true
});