跳到正文
SvgJsx
语言: 中文

SVG 转 TSX：带类型的 React 图标组件

从 SVG 生成 TypeScript React 组件，并附带正确的 props 类型，让每个图标都能接收 className、aria 属性和事件处理器，并享受完整的自动补全。

快速预设:
将 .svg 文件拖放到这里，或文件通过 FileReader 在本地读取，绝不会上传。
选项
导出方式:
import type { SVGProps } from "react";

const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

预览

转换后 SVG 的预览
原始 SVG
706 B
优化后 SVG
538 B(-24%)
组件
631 B

生成的类型如何工作

组件的 props 类型是 SVGProps<SVGSVGElement>，与 React 为 <svg> 元素定义的类型相同。这样你可以获得所有 SVG 属性和事件处理器的自动补全，传入无效属性时 TypeScript 会在编译阶段报错。

开启 size 选项后，props 类型变为 SVGProps<SVGSVGElement> & { size?: number | string }，width 和 height 由 size 决定。开启 forwardRef 后，ref 的类型为 Ref<SVGSVGElement>，父组件可以把 ref 交给测量工具或动画库使用。

TSX 输出检查清单

提交生成的图标之前，请确认：

  • 组件名为 PascalCase，并与文件名一致（ArrowLeft.tsx）。
  • SVGProps 和 Ref 只通过类型导入引入，在 JavaScript 包中会被完全移除。
  • 保留了 viewBox；没有它，图标就无法缩放。
  • 如果代码规范禁止默认导出，请改用具名导出。

兼容严格模式

生成的代码可以在 "strict": true 和 isolatedModules 下编译通过，满足 Next.js、Vite 和 esbuild 的要求。不会生成任何 any 类型，size 的默认值直接写在解构参数中。

常见问题

应该用 SVGProps 还是 ComponentProps<"svg">？

两者描述的属性相同。SVGProps<SVGSVGElement> 明确写出了元素类型，也是 React 类型定义中 <svg> 使用的类型，所以转换器采用它。

React 19 中还需要 forwardRef 吗？

React 19 允许函数组件把 ref 当作普通 prop 接收，因此 forwardRef 不再是必需的。但如果库还要兼容 React 18，它依然有用，所以它是一个默认关闭的可选项。

为什么 size 属性的类型是 number | string？

数字会被当作像素值；字符串则允许传入 "1em" 或 "1.5rem" 等 CSS 单位，让图标随周围文字一起缩放。

可以把整个图标文件夹转换成 TSX 吗？

可以。一次性拖入所有文件，每个 SVG 都会生成一个同名的 .tsx 文件，并与 index.ts 统一导出文件一起打包成 ZIP。