SVG 转 JSX

SVG转JSX工具介绍

SVG转JSX工具用于将原始 SVG 代码快速转换为 React JSX 或 TSX 组件代码，适合前端开发、组件库建设、图标封装、设计资源接入和后台系统图形管理等场景。您可以上传 SVG 文件、拖拽 SVG 到页面任意位置，或者直接粘贴 SVG 代码，工具会自动转换为可复制、可下载的 React 组件源码。

当前工具会自动处理常见的 SVG 属性驼峰写法、`class` 转 `className`、`style` 转对象格式，并支持 JSX 与 TSX 两种输出模式，方便在 React 项目中直接使用。

SVG转JSX工具功能特点

• 支持上传 SVG 文件、整页拖拽上传和直接粘贴 SVG 代码。
• 支持将 SVG 自动转换为 React JSX 组件代码。
• 支持切换 TSX 输出，便于 TypeScript React 项目使用。
• 支持自动处理 SVG 属性驼峰写法和 `className` 转换。
• 支持 `style` 属性对象化处理，并支持根节点透传 `props`。
• 支持颜色替换为 `currentColor`、复制结果、下载代码和代码预览。

SVG转JSX工具怎么用

1. 上传 SVG 文件，或将 SVG 文件拖入页面任意位置。
2. 如果已有源码，也可以直接粘贴 SVG 代码到输入区域。
3. 填写组件名称，并选择输出模式是 JSX 还是 TSX。
4. 根据需要开启 React 导入、默认导出、props 透传或 `currentColor` 替换。
5. 点击生成 JSX，工具会自动输出 React 组件代码。
6. 确认结果后，可以复制代码、下载源码或直接预览输出文本。

适用场景

• 将设计师导出的 SVG 图标批量接入 React 项目。
• 在组件库、管理后台、官网前端中封装可复用图标组件。
• 将 SVG 插画、状态图和功能图形转换为可维护的 JSX 代码。
• 为 TypeScript React 项目快速生成 TSX 图标组件。
• 统一图标颜色、透传 `props` 并适配不同尺寸与样式需求。

工具优势

• 在线即可完成 SVG 转 JSX，无需本地安装额外转换插件。
• 自动处理常见 SVG 与 React 语法差异，减少手工改写时间。
• 支持 JSX 和 TSX 两种模式，适配更多 React 项目场景。
• 支持 `currentColor` 替换和 `props` 透传，后续使用更灵活。
• 适合前端开发者、组件库维护者和设计开发协作团队长期使用。

常见问题

为什么 SVG 不能直接原样放进 React 组件？

因为 React JSX 对部分属性命名有特殊要求，例如 `class` 需要改成 `className`，`stroke-width` 需要改成 `strokeWidth`，所以通常需要做一层转换。

TSX 和 JSX 有什么区别？

JSX 适合普通 React 项目，TSX 适合使用 TypeScript 的 React 项目。当前工具支持两种输出模式，您可以按项目需要选择。

为什么要把颜色换成 `currentColor`？

将颜色改为 `currentColor` 后，SVG 图标可以跟随文字颜色变化，更适合按钮图标、导航图标和主题色统一管理。

转换后的 JSX 代码可以直接复制到 React 项目里吗？

一般可以直接使用。当前工具已经处理了常见属性差异，复制后通常只需按项目规范调整文件名或组件命名即可。