SVG 轉 React/JSX 轉換器

這款 SVG 轉 React JSX 轉換器 計算機可將原始的 SVG 檔案轉換為可重複使用的 React 組件。它是專為需要更乾淨的圖示組件、品牌標誌、產品插圖和設計系統資產，而不想手動修正每個 SVG 屬性的開發人員所設計。只需貼上 SVG 標記或上傳 UTF-8 編碼的 .svg 檔案，選擇您需要的 React 選項，然後將產生的組件複製到您的專案中即可。

如何使用

1. 貼上或上傳 SVG。 將完整的 SVG 檔案貼入編輯器或上傳 UTF-8 編碼的 .svg 檔案。
2. 為組件命名。 輸入 PascalCase 大駝峰格式的 React 組件名稱，例如 AlertIcon 或 BrandMark。
3. 選擇 React 選項。 選擇 TypeScript、forwardRef、React.memo、title 無障礙功能、樣式轉換、安全清理以及 prop 展開等選項。
4. 轉換為 JSX。 點擊「轉換為 React 組件」以產生可供複製的 JSX 程式碼。
5. 檢查並複製。 在複製到您的 React 專案之前，檢查轉換摘要、警告訊息和產生的程式碼。

轉換器處理的內容

打造更好 React SVG 組件的技巧

請盡可能保留原始的 viewBox，因為它控制著 SVG 的縮放方式。對於圖示系統，設置 width="1em" 和 height="1em" 可讓圖示繼承文字大小，同時仍允許呼叫端透過 props 覆寫尺寸。請使用具有描述性的 PascalCase 大駝峰組件名稱，在適當的時候使用 aria-hidden 保持裝飾性 SVG 的無障礙性，並為傳達資訊的實質圖示使用 title prop。

常見問題

這個 SVG 轉 React 轉換器會改變什麼？

它會解析 SVG XML 並將 SVG 屬性重寫為 React 友好的 JSX，包括 className、camelCase 小駝峰 SVG 屬性、選用的樣式物件、props、forwardRef、title 無障礙功能和匯出語法。

我可以上傳 SVG 檔案嗎？

可以。您可以上傳 UTF-8 編碼的 .svg 檔案或貼上 SVG 標記。上傳的檔案會以文字形式讀取並在伺服器上轉換為 JSX。

它會清理 SVG 程式碼嗎？

預設啟用安全清理。轉換器會移除 script 標籤、內聯事件處理常式和 javascript: 連結，讓產生的組件在整合前更安全地進行檢查。

為什麼要將 style 屬性轉換為物件？

在撰寫 JSX 時，React 預期 style prop 必須是一個物件。將樣式字串轉換為物件可使輸出乾淨地編譯，並保持 CSS 屬性名稱為 camelCase 小駝峰格式。

最推薦的組件名稱格式是什麼？

請使用 PascalCase 大駝峰格式，例如 AlertIcon 或 BrandMark。轉換器會清除無效字元，並確保結果以有效的 React 組件識別碼開頭。