Souus Tools
赞助

开发辅助

SVG 转 JSX — 生成 React 组件

把 SVG 标记转换成可直接粘贴的 React 组件，自动处理驼峰属性、currentColor 主题化、TypeScript 类型与安全预览。

免费使用 无需注册 浏览器本地运行

工具操作区

文件在页面内读取，不会上传。
ArrowRightIcon.tsx
import type { SVGProps } from 'react'

function ArrowRightIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path
        d="M5 12h14"
      />
      <path
        d="m12 5 7 7-7 7"
      />
    </svg>
  )
}

export default ArrowRightIcon

解析与转换均在浏览器内完成，标记和文件不会发送到服务器。

为什么 SVG 不能直接粘进 JSX

JSX 并不是 HTML。React 期望的是 DOM 属性名，因此所有带连字符的 SVG 表现属性都必须改成驼峰：stroke-width 变成 strokeWidth，stop-color 变成 stopColor，clip-rule 变成 clipRule。带命名空间的属性（如 xlink:href）在 JSX 中不能含冒号，要写作 xlinkHref。内联 style 必须是对象而非字符串，注释与 XML 声明则根本不是合法 JSX。与此同时，SVG 在大小写上与 HTML 不同——它是大小写敏感的：linearGradient、clipPath、feGaussianBlur、textPath 一旦被转成小写就会失效，而这正是面向 HTML 的转换器会做的事。本工具按 SVG 自身的规则解析，即使源文件已被压平成小写也能还原出规范写法，同时保留 data- 与 aria- 属性的连字符形式，因为 React 对这两类属性是原样保留的。

如何转换一个图标

  1. 1粘贴 SVG 或打开 .svg 文件；预览会先剔除脚本再渲染，便于确认复制的确实是目标图标。
  2. 2填写组件名。若从文件载入，arrow-right.svg 会自动变成 ArrowRight。
  3. 3若希望图标继承文字颜色而不是写死的十六进制值，打开 currentColor 选项。
  4. 4若希望图标随容器缩放，移除 width 与 height，仅保留 viewBox。
  5. 5复制组件代码，或下载为 .tsx / .jsx 文件直接放进项目。

SVG 转 JSX — 生成 React 组件的常见使用场景

快速完成日常任务

无需安装桌面软件，打开网页即可处理常见的文本、图片、数据或格式转换任务。

检查与整理内容

在提交文件、发布内容或复制结果之前，快速发现格式问题并获得结构清晰的输出。

注重隐私的浏览器处理

对于支持本地运行的工具，数据会留在当前浏览器中，不需要上传到第三方服务。

常见问题

为什么移除了 width 和 height 却要保留 viewBox？

viewBox 定义了坐标系与宽高比，正是它让图标能够缩放。而固定的 width 与 height 属性在部分浏览器中会覆盖 CSS 尺寸，因此移除它们、改用 CSS 或 size 属性控制大小，是图标组件的常见做法。

什么情况下不该用 currentColor？

它只适合单色图标。多色插画、渐变填充或有意留出的透明镂空都会被压成同一种颜色。正因如此，工具已自动跳过 none、transparent 与 url() 引用；但双色图标仍需人工检查配色。

如果 SVG 来路不明，预览安全吗？

预览渲染的是重新序列化的副本，其中的 script 元素、事件处理属性与 javascript: 链接都已被移除，因此粘贴内容中的脚本不会执行。JSX 输出是另一条路径，仍包含解析器识别到的全部内容，所以来源不明的标记在上线前仍应人工审阅。

它能取代 SVGR 吗？

如果只是处理少量图标，可以，而且无需任何依赖。但当你希望在构建时自动转换整个目录、应用 SVGO 优化与项目级模板时，SVGR 仍是更合适的选择。