一行 SVG 代码秒变 React 组件，不用手写 props、不用配 webpack

你有没有试过：设计师丢来一个 SVG 文件，你要把它塞进 React 项目里？
以前得手动打开文件、复制 <svg> 标签、包一层 function、加 props 支持 className 和 size……稍不注意还漏闭合标签、忘转义 fill 属性，最后组件一用就报错 ❌

现在——粘贴即转换，3 秒生成可复用的 React 组件。
它不是简单把 SVG 套个函数壳子，而是真·优化：
– 自动提取 viewBox，保留原始缩放逻辑
– 把 fill="#000" 这类硬编码转成 fill={fill || "#000"}，支持传参覆盖
– 去掉无用注释、空格和编辑器私有属性（比如 id="svg-1"）
– 输出干净的函数式组件（支持 React 18+，无副作用）

举个最简例子：
你粘贴这个原始 SVG（来自 Figma 或 Sketch 导出）：

<!-- 原始 SVG -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L13.09 8.26L20 8.26L14.5 12.67L16.91 20L12 17L7.09 20L9.5 12.67L4 8.26L10.91 8.26L12 2Z" fill="#FF6B6B"/>
</svg>

它会输出这样的 React 组件（直接复制就能用）：

// ✅ 生成的 React 组件（TypeScript 版）
import React from 'react';

interface StarIconProps extends React.SVGProps<SVGSVGElement> {
  size?: string | number;
}

export const StarIcon = ({ 
  size = 24, 
  fill = '#FF6B6B', 
  className, 
  ...props 
}: StarIconProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    className={className}
    {...props}
  >
    <path d="M12 2L13.09 8.26L20 8.26L14.5 12.67L16.91 20L12 17L7.09 20L9.5 12.67L4 8.26L10.91 8.26L12 2Z" fill={fill} />
  </svg>
);

💡 小贴士：生成后你还能继续改——比如把 fill 换成 color、加 stroke 支持、甚至用 asChild 适配 Radix UI……自由度拉满。

免费在线版开箱即用，无需注册、不传服务器、不存记录，所有转换都在你浏览器里完成。
适合：前端新手快速上手图标系统、中高级开发者批量处理设计资源、UI 库维护者统一 SVG 规范。

直达网址：https://svg-to-react-converter.vercel.app