SVG 轉 React JSX 工具SVG 轉 JSX 與 TSX,本機處理
zh-TW

AppHelp

把 SVG 轉成 React 或 TypeScript 元件

貼上或開啟 SVG,設定 JSX 與 TypeScript 選項,再於本機複製或下載元件。

SVG 轉 React 元件工作區

將 SVG 屬性轉成 JSX、加入 React props,並在本機匯出 JSX 或 TypeScript。

本機轉換
1. SVG 輸入
2. 元件選項

常見任務

  • SVG 轉 JSX
  • SVG 轉 React
  • SVG 轉 TSX
  • React SVG 元件

快速答案

貼上 SVG、設定元件名稱,選擇 JSX 或 TypeScript,再設定響應式尺寸、currentColor、標題、描述、memo、ref 與匯出;全程留在瀏覽器。

使用步驟

  1. 1. 輸入 SVG貼上 SVG 標記或開啟檔案。
  2. 2. 選擇選項設定名稱、型別、顏色、尺寸、props 與匯出。
  3. 3. 測試並匯出複製、格式化並在目標專案測試。

功能特點

  • React 相容 JSX 屬性
  • JSX 或 TypeScript 輸出
  • 響應式尺寸與 currentColor
  • 標題、描述、memo 與 ref 選項
  • 本機預覽與下載

常見問題

檔案會上傳嗎?
不會。轉換、預覽與匯出均在瀏覽器本機完成。