svg-optimizer

# 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", "properti...