開發者工具 / 26
SVG 轉 React JSX／TSX 轉換器
將 SVG 向量標記轉換成簡潔、元件化的 React JSX 或 TypeScript TSX 程式碼。
SVG 轉 React JSX／TSX 轉換器: TOEA 會將 SVG 的 kebab-case 屬性轉換成 React camelCase，將行內樣式轉換成 JS 物件，並包裝 SVG 元素。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
讓圖示像文字一樣運作
圖示元件若能從放置位置取得顏色和大小，就最容易重複使用。請將硬編碼的 fill 或 stroke 顏色替換為 currentColor，讓圖示跟隨周圍文字的顏色；並移除 width 和 height，保留 viewBox，讓 CSS 或 className 設定大小。先將檔案交給SVG 清理工具處理，可以移除編輯器中繼資料，避免這些資料最後進入 bundle。
ID、樣式與無障礙功能
漸層、遮罩和裁切路徑會透過 id 引用。同一個元件渲染兩次時，頁面上會出現重複的 ID，因此第二個副本可能會指向第一個副本的漸層。圖示使用這些功能時，請使用 React 的 useId 產生唯一 ID。
SVG 內的 <style> 元素會破壞 JSX，因為其中的大括號會被解讀為運算式；請將這些規則移至屬性或樣式表。裝飾性圖示請加入 aria-hidden="true"；承載意義的圖示則請加入 role="img" 和 <title>。
使用方式
- 貼上原始 SVG 標記。
- 設定元件名稱、TypeScript 介面和 prop 傳遞。
- 複製可直接使用的 React 元件程式碼。
隱私與限制
標記轉換完全在用戶端 JavaScript 中執行。
相關工具
常見問題
支援 TypeScript 嗎？
支援，工具會產生完整型別定義的 React.FC<React.SVGProps<SVGSVGElement>> 元件。
免費工具・使用在瀏覽器中次・免註冊