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% 瀏覽器本機處理（零上傳）)