开发者工具 / 26
SVG 转 React JSX / TSX 转换器
将 SVG 矢量标记转换为简洁、组件化的 React JSX 或 TypeScript TSX 代码。
SVG 转 React JSX / TSX 转换器: TOEA 会将 SVG 的 kebab-case 属性转换为 React 的 camelCase，将内联样式转换为 JS 对象，并封装 SVG 元素。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
让图标像文本一样工作
当图标组件从所在位置继承颜色和大小时，最容易复用。请将硬编码的fill或stroke颜色替换为currentColor，让图标跟随周围文本的颜色；同时移除width和height，保留viewBox，这样就能通过CSS或className设置大小。先使用SVG清理工具处理文件，可以移除否则会进入软件包的编辑器元数据。
ID、样式和无障碍
渐变、蒙版和剪切路径通过id引用。如果将同一个组件渲染两次，页面中就会出现重复的ID，第二个副本可能会指向第一个副本的渐变。图标使用这些功能时，请通过React的useId生成唯一ID。
SVG中的<style>元素会破坏JSX，因为其中的大括号会被当作表达式读取；请将这些规则移到属性或样式表中。装饰性图标请添加aria-hidden="true"；承载含义的图标请添加role="img"和<title>。
使用方法
- 粘贴原始 SVG 标记。
- 配置组件名称、TypeScript 接口和属性转发。
- 复制可直接使用的 React 组件代码。
隐私与限制
标记转换完全在客户端JavaScript中执行。
相关工具
常见问题
支持 TypeScript 吗？
支持。它会生成具有完整类型定义的 React.FC<React.SVGProps<SVGSVGElement>> 组件。
免费工具·使用在浏览器中次·无需账户