SVG to JSX
Convert SVG markup into clean React JSX or TSX components
将 .svg 文件拖放到这里
最大 5 MB 的 SVG 文件。
也可以从剪贴板粘贴。
PascalCase,例如 ArrowRightIcon。
更多选项
移除元素之间的注释和纯空白文本。这是安全清理,不是完整的 SVG 优化器。
装饰性图标请关闭:将移除 title、desc、role 和 ARIA 属性,并添加 aria-hidden。
替换根级 title 并添加 role="img"。
粘贴 SVG 标记或上传文件即可查看预览。
SVG to JSX 的功能
SVG to JSX 将 SVG 标记转换为 React 组件或普通 JSX 元素。属性会映射为 React 名称(class → className、stroke-width → strokeWidth、fill-rule → fillRule、clip-path → clipPath、xlink:href → xlinkHref),内联 style 字符串会转换为 style 对象,并始终保留 viewBox,让图标能够正确缩放。
使用方法
- 1.粘贴 SVG 标记,拖放或选择 .svg 文件,或加载示例。
- 2.检查已净化的预览以及已移除的不安全项目列表。
- 3.设置组件名称并选择 JSX 或 TSX 输出。
- 4.按需切换组件包装、展开 props、移除 width/height 和 currentColor。
- 5.复制代码,或下载为 .jsx 或 .tsx 文件。
选项说明
展开 props 会把 className、尺寸和事件 props 从组件传递到根 <svg>;TSX 会添加 SVGProps<SVGSVGElement> 类型。移除 width 和 height 后,可通过 viewBox 由 CSS 控制尺寸。currentColor 会替换纯色 fill 和 stroke,使图标继承文字颜色;none、transparent、渐变(url(...))和 CSS 变量保持不变。清理空白会移除元素之间的注释和纯空白文本,这是安全清理,不是完整的 SVG 优化。装饰性图标可关闭无障碍属性,以移除 title、desc、role 和 ARIA 并添加 aria-hidden;有意义的图标可输入标题,并使用 role="img" 标注。
安全与限制
所有输入在预览和转换前都会先净化:<script>、<foreignObject>、onclick 等事件处理器、javascript: URL、外部图片或资源引用以及不支持的元素都会被移除并列出。DOCTYPE 声明和 XML 实体会被拒绝。预览仅以图片形式渲染已净化的标记,因此 SVG 中的任何内容都不会执行。SVG 文本上限为 5 MB。由于不支持的元素会被移除,转换复杂插图时请将预览与原文件对比。
