# Svg Optimizer

> Optimize SVG assets, generate sprites, and convert to React components

- Skill: `majiayu000/svg-optimizer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/svg-optimizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/svg-optimizer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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",
  "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
});
```