SVG 转 Jsx
免费在线使用 SVG 转 Jsx 无需安装即可使用工具
關於 SVG 轉 JSX 轉換器
將原始 SVG 標記轉換為可直接貼上的 React 元件。它會把 SVG 屬性改寫為 React 相容的駝峰式 props（class 改為 className、stroke-width 改為 strokeWidth、xlink:href 改為 xlinkHref 等），把內聯樣式字串轉換為 React 樣式物件，自動閉合空元素和 SVG 形狀元素，並移除預設的 xmlns="http://www.w3.org/2000/svg" 命名空間。
使用方法
1. 將你的 SVG 標記（必須包含 <svg> 和 </svg>）貼上到輸入框 2. 點擊 Prettify 在轉換前自動縮排標記（可選） 3. 設定元件名稱（預設為 SvgComponent，僅允許字母、數字和底線） 4. 根據需要勾選 "use client" 指令和/或 useMemo 鉤子 5. 點擊 Convert 產生 JSX 元件並複製到剪貼簿
元件輸出選項
元件名稱欄位控制匯出的識別符。勾選 "use client" 核取方塊後，輸出會在單獨一行以 "use client" 開頭，並作為預設匯出（無 props）；否則作為命名常數匯出，接收 props 並回傳 svg。啟用 useMemo 後，SVG 標記會被包裝在 useMemo(() => (...), []) 中。輸入必須同時包含 <svg 和 </svg>，否則會因 SVG 無效而被拒絕並報錯。
▶哪些 SVG 屬性會被自動轉換？
常見情況包括 class 轉 className、fill-opacity/stroke-opacity/stroke-width/stroke-linecap/stroke-linejoin/stroke-dasharray/stroke-dashoffset、clip-path/clip-rule、fill-rule、font-family/font-size/font-weight、letter-spacing/word-spacing、text-anchor、xml:space、xlink:href/xlink:title/xlink:role 以及 xmlns:xlink。其他任何短橫線命名（kebab-case）的屬性會回退到通用的駝峰式轉換。
▶Prettify 有什麼作用？
它會根據標籤巢狀關係，使用縮排重新格式化輸入框中的 SVG，使原始碼在轉換前更易閱讀。它不會影響最終產生的 JSX 輸出。
▶為什麼要移除 xmlns 屬性？
僅預設的 xmlns="http://www.w3.org/2000/svg" 命名空間會被移除，因為 React 會自動注入它。其他 xmlns 宣告會被保留。
▶可以產生 Next.js 客戶端元件嗎？
可以。勾選 "use client" 核取方塊後，輸出將以 "use client" 指令開頭，並將元件作為預設匯出。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。