01
1. 為什麼要將 SVG 轉成 JSX
React（JSX）的語法和 HTML/SVG 稍有不同。帶連字號的屬性（stroke-width）必須轉成 camelCase（strokeWidth），class 會變成 className，而 style 必須是 JavaScript 物件而不是字串。這個工具會自動處理這些差異，讓設計師匯出的 SVG 圖示可以直接貼到 React 元件中。
⚛️ SVG 轉 React JSX 轉換器
貼上 SVG 標記，即可轉換成可直接放進 React 元件的 JSX。它會將屬性轉成 camelCase（class→className）、把 style 字串轉成物件，並移除註解與 DOCTYPE。
更多開發者工具
瞭解更多
02
2. 轉換規則
它會將 class→className、for→htmlFor，將 stroke-width、fill-opacity 這類帶連字號的屬性轉成 camelCase，將 xlink:href 這類具命名空間的屬性轉成 xlinkHref，並保留 data-/aria- 屬性原樣不變。style="fill:red;stroke-linecap:round" 會變成物件 style={{ fill: 'red', strokeLinecap: 'round' }}，同時移除註解、DOCTYPE 與 XML 宣告。
03
3. 以 DOMParser 安全轉換
這個工具不是靠 regex，而是直接使用瀏覽器的 DOMParser 解析 SVG，再重新序列化，因此巢狀結構與屬性都能正確處理。所有操作都在你的瀏覽器中完成，程式碼不會送到伺服器。把結果貼進元件後，你可以再依需求微調，例如把 width/height 提升成 props，或將 fill 改成 "currentColor"。
常見問題
我可以直接把輸出用在 React 裡嗎？
可以。把 JSX 貼進元件的 return 中即可。你也可以選擇把尺寸和顏色改成 props，讓它更容易重複使用。
style 字串也會一起轉換嗎？
會。像 style="a:b;c:d" 這樣的字串，會轉成物件 style={{ a: 'b', c: 'd' }}，並將 CSS 屬性名稱轉為 camelCase。
我的 SVG 會送到伺服器嗎？
不會。轉換完全在你的瀏覽器中進行，程式碼不會送到伺服器。
它有用像 svgr 這樣的函式庫嗎？
沒有。它是直接用瀏覽器內建的 DOMParser 實作，沒有任何外部函式庫。