Zolkit

SVG 转组件

将任意 SVG 一键转为可直接投产的 React 或 Vue 组件——含 size prop、JSX 属性，零依赖。

框架
Input
组件代码

即时在浏览器中将 SVG 转为 React 或 Vue 组件

将 SVG 直接复制到 React 或 Vue 项目中，意味着要手动重命名属性、添加 size prop、清理 XML 声明——Zolkit SVG 转组件工具将这一切自动化。粘贴 SVG，几秒钟内获得类型完备的组件代码。

正确的 JSX 属性

自动将 SVG 属性名转换为 JSX 对应形式：stroke-width → strokeWidth、fill-rule → fillRule、class → className 等，一次性全部处理完毕。

即时转换

输入即见结果，纯 JavaScript 实现——无服务器往返、无重型库、无 WASM，全程在浏览器中高速完成。

支持 React 与 Vue

生成带 SVGProps 类型声明的 React 函数组件，或基于 Composition API script setup 的 Vue SFC，一键切换框架。

完全私密

SVG 代码从不离开您的浏览器，在内存中转换，无服务器、无日志记录、无数据收集。

永久免费

无需账号，无使用限制，无付费墙。粘贴 SVG，复制组件，立即发布。

内置 size Prop

每个生成的组件均接受 size prop（默认值 24），同时控制宽度和高度，轻松在设计系统的任意尺寸下使用。

如何将 SVG 转为组件

  1. 1

    将 SVG 代码粘贴至输入面板，或将 .svg 文件拖放至其上。

  2. 2

    输入组件名称，选择目标框架——React (TSX) 或 Vue (SFC)。

  3. 3

    复制生成的组件代码，或点击下载将其保存为 .tsx 或 .vue 文件。

常见问题

哪些 SVG 属性名会被转换为 React 的驼峰命名？

所有连字符 SVG 属性都会转为驼峰式：stroke-width → strokeWidth、fill-rule → fillRule、clip-rule → clipRule、stroke-linecap → strokeLinecap 等。特殊情况 class → className 和 xlink:href → href 也一并处理。

为什么 Vue 输出不转换属性名？

Vue 模板原生支持 SVG 元素上的连字符属性名——浏览器和 Vue 编译器都能正确处理 stroke-width，无需转换，这样输出结果也更接近原始 SVG。

size prop 的作用是什么？

生成的组件会将 SVG 固定的 width 和 height 值替换为 size prop（默认值 24），方便在任意尺寸下使用：<MyIcon size={32} /> 或 <MyIcon size={16} />。

React 组件可以接收自定义 SVG 属性吗？

可以。React 组件继承了 React.SVGProps<SVGSVGElement>，因此可以传入任何合法的 SVG 属性：fill、stroke、className、aria-label 等。根元素 <svg> 上的 {...props} 会将它们全部透传。

没有子元素的 SVG 元素（如 <path>）会如何处理？

常见的 SVG 空元素（path、circle、rect、ellipse、line、stop 等）如果在源码中以 <elem></elem> 形式出现，会自动转换为 JSX 要求的自闭合形式 <elem />。

这个工具能处理多色或复杂的 SVG 吗？

可以——转换器会处理 SVG 中的所有元素和属性，不仅限于简单的单路径图标。渐变、滤镜、蒙版和分组均完整保留。输出是包裹在组件中的完整 SVG，而非简化版本。