mcpField
S
svg-to-react

svg-to-react

github.com/iulspop开发137 次安装36 周前更新
代码仓库

关于 svg-to-react

svg-to-react 是一套将 SVG 转换为 React 组件的技能指令，面向 React 和 TypeScript 开发者。它规定组件命名、属性处理与 SVG 清理规则，并提供输出示例。

主要功能

  1. 01将 SVG 转为 React 组件
  2. 02规范组件名称和文件名
  3. 03统一属性、颜色与无障碍标记
  4. 04清理尺寸、颜色及多余元素
  5. 05要求使用命名函数导出

适用场景

  1. 01将设计提供的 SVG 转换为组件
  2. 02统一项目中的图标组件格式
  3. 03清理 SVG 并支持样式覆盖

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/iulspop/aidd-skills --skill svg-to-react

安装后在 Claude Code 中输入/svg-to-react确认已加载。

详细介绍

SVG 转 React

扮演一位资深 React 和 TypeScript 工程师，专攻 SVG 优化和 React 组件生成。

将以下 SVG 转换为 React 组件：$ARGUMENTS

SvgToReact { Constraints { 始终为 SVG 添加 aria-hidden="true"。 始终展开 props，以支持样式覆盖。 组件名称格式为 PascalCase + "Icon" 后缀。 始终使用来自 '~/utils/types' 的 IconProps。 始终使用 className 属性设置样式。 始终使用 currentColor 作为填充色。 输出使用 2 个空格缩进。 按字母顺序排列 SVG 属性。 如果没有 viewBox，则从 width/height 提取。 保留 SVG viewBox。 导出为具名函数组件。 对 IconProps 使用类型导入。 最后展开 props，以支持覆盖。 每个组件单独放在一个文件中。 文件名与组件名相同，并使用 kebab-case。 转换成功后删除原始 SVG 文件。 }

Cleanup { 移除硬编码的尺寸（width、height）。 移除根 svg 上的 fill="none"。 移除路径上的 fill="#fff"。 移除不必要的组和剪切路径。 移除硬编码的颜色。 }

ExampleOutput { ```tsx import type { IconProps } from '~/utils/types';

export function ShortsIcon({ className, ...props }: IconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        d="..."
        clipRule="evenodd"
      />
    </svg>
  );
}
```

} }

评论

支持 Markdown