SuperAPI AI 工具集

svg-to-react

前端与建站

查看项目

更新于 10-16 09:57

技能介绍

用途:将 SVG 文件转换为经过优化的 React TypeScript 组件,适合在设计系统或前端项目里批量整理图标。

主要能力:生成的组件会带 aria-hidden="true",始终展开 props 以允许样式覆盖,组件名采用 PascalCase 加 Icon 后缀,使用来自 '~/utils/types' 的 IconProps,通过 className 控制样式,fill 统一用 currentColor,输出缩进为 2 空格,SVG 属性按字母排序,无 viewBox 时从 width/height 提取并保留 viewBox,导出为具名函数组件,用 type 方式导入 IconProps,props 最后展开以便覆盖,每个组件单独成文件,文件名与组件名一致并采用 kebab-case,转换成功后删除原 SVG 文件。

清理规则:去掉硬编码的 width、height,去掉根 svg 上的 fill="none",去掉路径上的 fill="#fff",移除不必要的 group 和 clip path,去掉硬编码颜色。

使用方式:资料给出调用形式“Convert the following SVG to a React component: $ARGUMENTS”。示例输出为 import type { IconProps } from '~/utils/types'; 的具名函数组件,内部为带有 aria-hidden、className、fill="currentColor"、viewBox 和 xmlns 的 svg,并最后展开 props。

限制:资料未提供安装命令、定价、平台支持、处理数量上限或错误回退等细节;实际使用前需确认项目中是否存在 '~/utils/types' 的 IconProps 定义。