粘贴 SVG,得到一个 React 组件,属性驼峰化、style 转对象、用 {...props} 透传。浏览器本地完成。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
完全在浏览器里通过 DOMParser 跑(只读 —— 不执行、不上传)。你的 SVG 会同步进 URL,分享链接可复现;私有图稿请手动复制输出。
这个工具能做什么
免费在线 SVG 转 JSX / React 组件工具。粘贴原始 SVG(从 Figma 导出的 图标、一段 `lucide` / Heroicons 的 path、从设计稿复制的内联 `<svg>`、带 渐变和裁剪路径的整幅插画),立刻得到能直接塞进 `.jsx` / `.tsx` 文件、 不会被编译器报错的 JSX。我们把 React 要求驼峰写法的属性全部驼峰化: `stroke-width` 变 `strokeWidth`、`fill-rule` 变 `fillRule`、`clip-path` 变 `clipPath`、`stop-color` 变 `stopColor`,整套表现属性都处理。带命名 空间的属性也一并处理:`xlink:href` 变 `xlinkHref`、`xmlns:xlink` 变 `xmlnsXlink`、`xml:space` 变 `xmlSpace`。`class` 变 `className`,内联 `style="fill:red;stroke-width:2"` 变成真正的对象 `style={{ fill: 'red', strokeWidth: '2' }}`,空元素自闭合,`<!-- 注释 -->` 变成 `{/* JSX 注释 */}`。大小写敏感的 SVG 元素名(`linearGradient`、 `clipPath`、`feGaussianBlur`)和混合大小写的属性(`viewBox`、 `preserveAspectRatio`、`gradientUnits`)都保留原样,把它们的大小写改错, 是手工转换的 SVG 渲染成一片空白最常见的原因。勾上"包成组件",你会得到 `export default function Icon(props) { return (<svg {...props}>…) }`,调用 方就能通过 props 控制颜色、尺寸、`className` 和点击事件。"移除 width/height"会去掉写死的尺寸,交给 CSS 或 props 决定。解析走浏览器原生 DOMParser 的只读模式,所以即使粘进来带脚本或 `onload` 的代码也不会被执行。 100% 浏览器本地完成,不上传、不记录。
工具细节
- 输入
- 文件 + 文本
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 18 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
SVG 转 JSX 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把 Figma 导出的图标做成可复用组件
你从 Figma 把图标导出成了 SVG。直接粘进 `.tsx` 文件,第一个 `stroke-width=` 和内联 `style="..."` 就报错;就算改完,它还是渲染 成空白,因为 `viewBox` 在某处被改成了小写。流程:粘到这里,保持 "包成组件"开启,把名字设成 `MenuIcon`,复制结果。你得到 `export default function MenuIcon(props) { return (<svg {...props}>…) }`, 每个属性都驼峰化了,`viewBox` 的大小写也原封不动。塞进去,写 `<MenuIcon className="size-5" />`,搞定。
把 lucide / Heroicons 的一段 path 收进自己的图标集
你在某个开源图标集里找到了正好要用的那个图标,但不想为一个字形 引入整个依赖。从图标页复制内联 `<svg>`,粘到这里,勾上"移除 width/height"让你的 CSS 来定尺寸,复制。因为源码用的是 `stroke="currentColor"`,生成的组件会自动继承文字颜色,一个组件, 任意颜色,常见情况下不用传 props。
把代码库里的旧 SVG 批量迁移
一个老项目里有几十个内联 SVG,写成了类 HTML 的标记,带着 `class`、 `stroke-width` 和 `xlink:href`。逐个过一遍转换器,得到合法的 JSX: `class` → `className`、`stroke-width` → `strokeWidth`、`xlink:href` → `xlinkHref`。从"这个 SVG 在静态页面里能用"到"这个 SVG 能在 React 组件里编译",这是最快的路,不用搭构建期的 SVGR。
内联一个带渐变和裁剪路径的 Logo
一个品牌 Logo 的 SVG 用到了 `<linearGradient>`、`<clipPath>`、 `<feGaussianBlur>`,全是大小写敏感的元素名,粗暴的查找替换会把 它们改坏。整段粘进来;转换器保留每个元素的大小写,把 `stop-color` 和 `clip-path` 驼峰化,把内联样式转成对象。你得到一个自包含的组件, 而不是一个改不了颜色的 `<img>`。
给同事讲清 SVG 转 JSX 的坑
带一个刚上手 React、总问为什么粘进去的 SVG 什么都不显示的同事? 粘一个小图标给他看 diff:`stroke-width` 对 `strokeWidth`、为什么 `viewBox` 的大写 B 不能丢、`{...props}` 放在哪。把 URL 分享给他 (输入就在链接里),他能自己重放、换上自己的 SVG,不用重新敲一遍。
常见踩坑
把大小写敏感的名字改成小写。`viewBox`、`preserveAspectRatio`、`gradientUnits`,以及 `linearGradient` / `clipPath` 这类 SVG 元素名都是大小写敏感的,改了大小写,SVG 会渲染成空白且不报错。我们原样保留它们;手工查找替换通常做不到。
忘了转换器不做净化。它只驼峰化并重建,不清洗。源 SVG 里的 `<script>` 或 `onload` 会留进 JSX(处理器会被驼峰化)。发布来自不可信来源的 SVG 前要审一遍输出。
以为 `xlinkHref` 在新版 React 里是最优解。我们输出 `xlinkHref` 是因为它和现有代码库一致、且一定能编译,但较新的 React 更推荐在 `<use>` 上直接用 `href`。如果你用的是新版本、看到弃用警告,粘贴后把 `xlinkHref` 改成 `href` 即可。
隐私说明
转换是纯 JavaScript,完全在你的浏览器标签页里跑。你的 SVG 用原生 DOMParser 在一个惰性文档里解析,没有网络请求、不上传、不记录你粘了 什么,脚本永不执行。唯一会"出门"的东西:你的输入会同步到页面 URL 的 query string 里,这样分享链接能复现同一份转换。这对协作很方便,但也 意味着输入里的任何内容都会进浏览器历史和接收方的服务器日志。私有图稿 或内嵌敏感数据的 SVG,请手动复制输出,而不是分享 URL。你的转换选项 (包组件、移除尺寸、缩进、名字)记在本浏览器的 localStorage 里, 永远不离开设备。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。