SVG to Component
SVG 转框架组件。
把 SVG 贴进来，一键转成 React、Vue 3 或 Svelte 组件代码。
纯浏览器处理 · 文件不上传
粘贴 SVG 代码，或拖入一个 .svg 文件
转换在你的浏览器里完成，不上传服务器。
目标框架
三步转成组件
粘贴 SVG，选好框架，复制走人。
1
粘贴或拖入 SVG
粘贴 SVG 源码或拖入 .svg 文件，组件名默认取文件名。
2
选目标框架
React（TSX）会把 class 转 className、属性转驼峰；Vue 3 和 Svelte 保持原属性。
3
复制代码
得到的组件带类型签名（React），直接放进项目就能 import 使用。
转换时会发生什么
不只是复制粘贴，属性会按框架规范重写。
class → className
React 目标自动把 class 换成 className，data-* 和 aria-* 保持原样不被误转。
kebab → 驼峰
stroke-width、fill-rule 这类连字符属性在 React 里自动转成 strokeWidth、fillRule。
展开 props
React 组件末尾接 {...props}，外部可以直接覆盖宽高、颜色等属性。
去掉干扰属性
id、style 这类容易冲突的属性会被移除，组件更干净、可复用。
常见问题
关于 SVG 转组件的一切。
支持哪些框架？▾
React（TSX 函数组件，带 SVGProps 类型）、Vue 3（script setup + template）、Svelte 三种。
我的 SVG 会被上传吗？▾
不会。转换在你的浏览器里完成，这个工具没有上传环节。
为什么去掉了 id 和 style？▾
id 会造成页面内重复，内联 style 会挡住外部样式控制，转成组件时移除最干净。需要时可以转完手动加回。
多色的 SVG 能转吗？▾
能。转换只处理属性写法，路径、渐变、多色填充原样保留。
React 组件能改颜色吗？▾
把 SVG 里的 fill 改成 currentColor（转换不会替你猜），之后用 CSS 的 color 或传属性控制。