SVG 转组件转换器有什么用？

它将原始 SVG 转换为可复用的 React（JSX/TSX）或 Vue 3 组件。除了把 SVG 封装进组件，还会清理代码并将属性调整为各框架的正确格式。

React 转换是如何进行的？

在 React 中，属性会转换为 camelCase（例如 stroke-width 变为 strokeWidth），class 变为 className，字符串 style 变为对象。SVG 被封装进一个将 props 转发到 svg 元素的函数组件，非常适合图标系统。

Vue 3 转换又如何？

在 Vue 3 中，SVG 被放入使用 script setup (lang ts) 的单文件组件的 template 块内。属性保持 HTML 格式（kebab-case），组件会自动将属性转发到根元素。

currentColor 选项有什么用？

它将固定的 fill 和 stroke 颜色替换为 currentColor，使图标继承文本颜色（CSS 的 color 属性）。这在图标系统中至关重要，因为只需更改父元素的颜色即可重新着色图标。

生成的组件支持 TypeScript 吗？

支持。选择 React（TSX）可生成使用 SVGProps 的带类型组件；Vue 3 使用 script setup (lang ts)。两者都能在 TypeScript 项目中直接使用，无需修改。

我的 SVG 会被发送到服务器吗？

不会。所有转换都通过 JavaScript 在你的浏览器本地完成。没有任何 SVG 或代码被发送到 ToolboxHub 服务器。

免费在线 SVG 转 React / Vue 组件转换器

关于 SVG 转组件转换器

粘贴原始 SVG，即可获得 React（JSX 或 TSX）或 Vue 3 的可用组件。工具会清理代码，将属性转换为各框架的格式（JSX 中的 camelCase 和 className），可将颜色替换为 currentColor 并移除尺寸，使图标通过 CSS 缩放。非常适合构建内部图标系统。所有处理都在浏览器本地完成。要缩小代码体积，请使用我们的压缩工具。

三步完成转换

1将 SVG 代码粘贴到输入框。
2选择框架（React JSX/TSX 或 Vue 3）和组件名称。
3复制或下载组件，编辑时会立即生成。

SVG 转组件转换器

生成的组件