清晰输出
规范属性和结构，生成 React 友好标记。
全部工具
开发者工具
SVG 转 React / JSX
将 SVG 标记转换为整洁的 JSX 或带类型的 React 组件，并支持响应式尺寸和 currentColor。
默认保护隐私。 处理过程在浏览器中完成。
- 添加输入选择文件、粘贴内容或填写信息。
- 选择设置查看实用的默认设置，并按需调整。
- 保存结果复制或下载完成的结果。
SVG 转 React 转换器
粘贴 SVG 标记或打开文件。代码会保留在此浏览器中。
SVG 输入
粘贴完整的 <svg> 元素
SVG 文件最大 2 MB。脚本、事件处理器和不安全的外部资源将被移除。
React 输出
输出
React 就绪代码将显示在此处
粘贴 SVG 标记、拖放文件或加载示例以开始。
适合生产 React 代码的清晰 SVG
将原始 SVG 标记转换为易读的 JSX 或带类型组件。
灵活组件代码
支持 JSX 或 TSX、响应式尺寸和 currentColor。
SVG 转换要点
将矢量资源带入组件工作流。
- 将 SVG 标记转换为 JSX 或 TSX。
- 使用响应式尺寸和 currentColor。
- 复制清理后的组件。
常见问题
SVG 标记会被上传吗？
不会，解析和转换都在浏览器中完成。
可以生成 TypeScript 吗？
可以，选择 TSX 即可生成带类型的 React 组件。
需要更强的前端系统？
我们构建生产级 React 应用和组件库。
开始项目