SVG to JSX
Convert SVG markup into clean React JSX or TSX components
將 .svg 檔案拖放到這裡
最大 5 MB 的 SVG 檔案。
也可以從剪貼簿貼上。
PascalCase,例如 ArrowRightIcon。
更多選項
移除元素之間的註解與純空白文字。這是安全的清理,不是完整的 SVG 最佳化工具。
裝飾性圖示請關閉:會移除 title、desc、role 與 ARIA 屬性,並加上 aria-hidden。
取代根層級 title 並加上 role="img"。
貼上 SVG 標記或上傳檔案即可查看預覽。
SVG to JSX 的功能
SVG to JSX 會將 SVG 標記轉換為 React 元件或一般 JSX 元素。屬性會對應到 React 名稱(class → className、stroke-width → strokeWidth、fill-rule → fillRule、clip-path → clipPath、xlink:href → xlinkHref),行內 style 字串會轉為 style 物件,並且一律保留 viewBox,讓圖示能正確縮放。
使用方式
- 1.貼上 SVG 標記、拖放或選擇 .svg 檔案,或載入範例。
- 2.檢查已清理的預覽與已移除的不安全項目清單。
- 3.設定元件名稱並選擇 JSX 或 TSX 輸出。
- 4.視需要切換元件包裝、展開 props、移除 width/height 與 currentColor。
- 5.複製程式碼,或下載為 .jsx 或 .tsx 檔案。
選項說明
展開 props 會將 className、尺寸與事件 props 從元件傳到根 <svg>;TSX 會加入 SVGProps<SVGSVGElement> 型別。移除 width 與 height 後可透過 viewBox 由 CSS 控制尺寸。currentColor 會取代純色 fill 與 stroke,讓圖示沿用文字顏色;none、transparent、漸層(url(...))與 CSS 變數不會變更。清理空白會移除元素之間的註解與純空白文字,這是安全的清理,不是完整的 SVG 最佳化。裝飾性圖示可關閉無障礙屬性,以移除 title、desc、role 與 ARIA 並加上 aria-hidden;有意義的圖示可輸入標題,並以 role="img" 標示。
安全性與限制
所有輸入在預覽與轉換前都會先清理:<script>、<foreignObject>、onclick 等事件處理器、javascript: URL、外部圖片或資源參照,以及不支援的元素都會被移除並列出。DOCTYPE 宣告與 XML 實體會被拒絕。預覽只會以圖片形式呈現已清理的標記,因此 SVG 內的任何內容都不會執行。SVG 文字上限為 5 MB。由於不支援的元素會被移除,轉換複雜插圖時請將預覽與原始檔比對。
