SVG 转 React (JSX / TSX) 与 Vue 组件

一键将 SVG 图标转换为标准 React TSX、React JSX 或 Vue 3 组件。自动将短横线属性转换为驼峰命名，并支持一键开启 currentColor 动态变色。

或直接在下方粘贴 / 编辑 SVG 源码
import type { SVGProps } from "react"

export function SvgIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="128" height="64" viewBox="0 0 128 64" {...props}>
  
  
  <rect x="16.12" y="12.57" width="96" height="40" rx="8" fill="currentColor" stroke="currentColor" strokeWidth="2"/>
  <circle cx="44.89" cy="32.44" r="10.25" fill="currentColor"/>
</svg>
  )
}

export default SvgIcon

技术规格与本地隐私保护

处理方式
100% 浏览器本地处理（零上传）
核心开源引擎
SVGR Attribute AST Mapper (React TSX / JSX / Vue 3)
费用与限制
完全免费、无水印、免注册

常见问题

一键将 SVG 图标转换为标准 React TSX、React JSX 或 Vue 3 组件。自动将短横线属性转换为驼峰命名，并支持一键开启 currentColor 动态变色。 (100% 浏览器本地处理（零上传）)