SVG优化器技能

目的

为Web和移动应用优化SVG资源，包括压缩、精灵图生成和React组件转换。

能力

移除不必要的元数据和注释
优化路径和形状
为图标系统生成SVG精灵图
将SVG转换为React/Vue组件
压缩SVG文件大小
确保可访问性属性（aria标签、角色）
生成图标文档

目标流程

component-library.js (iconSystemDesignTask)
design-system.js

集成点

SVGO用于优化
svgr用于React组件生成
svg-sprite用于精灵图生成

输入模式

{
  "type": "object",
  "properties": {
    "inputPath": {
      "type": "string",
      "description": "SVG文件或目录的路径"
    },
    "outputPath": {
      "type": "string",
      "description": "输出目录"
    },
    "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"]
}

输出模式

{
  "type": "object",
  "properties": {
    "optimizedFiles": {
      "type": "array",
      "description": "优化后的SVG文件列表"
    },
    "spritePath": {
      "type": "string",
      "description": "生成的精灵图文件路径"
    },
    "componentPaths": {
      "type": "array",
      "description": "生成的组件路径"
    },
    "sizeSavings": {
      "type": "object",
      "description": "文件大小缩减统计"
    },
    "accessibilityReport": {
      "type": "object",
      "description": "添加的可访问性属性报告"
    }
  }
}

使用示例

const result = await skill.execute({
  inputPath: './icons',
  outputPath: './optimized-icons',
  generateSprite: true,
  generateComponents: true,
  componentFormat: 'react',
  addAccessibility: true
});