跳到正文
在线 SVG 编辑器

工具

SVG 转 JSX 转换器

粘贴 SVG 得到 React 组件,支持 TypeScript 与自定义组件名。

如何把 SVG 转为 JSX

  1. 粘贴 SVG 源码。
  2. 设置组件名(需要的话启用 TS)。
  3. 点击“转换”。
  4. 复制或下载 JSX 文件。

关于 SVG 转 JSX

React / JSX 要求属性名使用驼峰、class 要写成 className。本工具会处理这些重写,给你一个可直接使用的组件。

常见问题

会把 props 透传到根 <svg> 吗?

会,调用方可以传入 className、style、onClick 等。

连字符属性怎么处理?

会转为驼峰式:stroke-width → strokeWidth。

可以选择 TypeScript 吗?

可以,启用 TS 开关即可输出带类型的组件。

输出可以被 tree-shake 吗?

可以,它是一个具名导出,打包器会把它当作普通模块处理。