工具
SVG 转 JSX 转换器
粘贴 SVG 得到 React 组件,支持 TypeScript 与自定义组件名。
如何把 SVG 转为 JSX
- 粘贴 SVG 源码。
- 设置组件名(需要的话启用 TS)。
- 点击“转换”。
- 复制或下载 JSX 文件。
关于 SVG 转 JSX
React / JSX 要求属性名使用驼峰、class 要写成 className。本工具会处理这些重写,给你一个可直接使用的组件。
常见问题
会把 props 透传到根 <svg> 吗?
会,调用方可以传入 className、style、onClick 等。
连字符属性怎么处理?
会转为驼峰式:stroke-width → strokeWidth。
可以选择 TypeScript 吗?
可以,启用 TS 开关即可输出带类型的组件。
输出可以被 tree-shake 吗?
可以,它是一个具名导出,打包器会把它当作普通模块处理。