Zolkit

SVG 轉元件

將任何 SVG 轉換為可直接用於生產的 React 或 Vue 元件，包含 size prop、JSX 屬性，零依賴。

框架
Input
元件輸出

免費線上將 SVG 轉換為 React 或 Vue 元件

將 SVG 放入 React 或 Vue 程式碼庫時，需要手動重新命名屬性、加入 size prop，並清理 XML 前置宣告。Zolkit 的 SVG 轉元件工具會自動完成所有這些工作，貼上 SVG 即可在幾秒內獲得乾淨、型別安全的元件。

正確的 JSX 屬性

自動將 SVG 屬性名稱轉換為對應的 JSX 形式：stroke-width → strokeWidth、fill-rule → fillRule、class → className 等。

即時轉換

輸入即見結果。純 JavaScript 實作，無需伺服器往返，無大型程式庫，無 WASM，完全在瀏覽器中快速處理。

支援 React 和 Vue

可產生帶有 SVGProps 的 React 函式元件，或帶有 Composition API script setup 區塊的 Vue SFC，一鍵切換框架。

100% 私密安全

您的 SVG 程式碼不會離開瀏覽器，所有轉換都在記憶體中完成，無伺服器、無記錄、無資料收集。

永久免費

無需帳號、無使用限制、無付費牆，貼上 SVG、複製元件、直接出貨。

內建 Size Prop

每個產生的元件都接受 size prop（預設值 24），同時控制寬度和高度，讓您在設計系統中輕鬆以任何尺寸使用。

如何將 SVG 轉換為元件

  1. 1

    將 SVG 程式碼貼入輸入面板，或將 .svg 檔案拖曳至其上。

  2. 2

    輸入元件名稱，並選擇目標框架 — React (TSX) 或 Vue (SFC)。

  3. 3

    複製產生的元件程式碼，或點擊「下載」儲存為 .tsx 或 .vue 檔案。

常見問題

React 會轉換哪些 SVG 屬性名稱？

所有連字號形式的 SVG 屬性都會轉換為 camelCase：stroke-width → strokeWidth、fill-rule → fillRule、clip-rule → clipRule、stroke-linecap → strokeLinecap 等。特殊情況 class → className 和 xlink:href → href 也都有處理。

為什麼 Vue 輸出不轉換屬性名稱？

Vue 模板原生支援 SVG 元素上的 kebab-case 屬性名稱，瀏覽器和 Vue 編譯器都能正確處理 stroke-width，無需轉換，這樣 Vue 輸出結果更接近原始 SVG。

Size prop 有什麼作用？

產生的元件會用 size prop（預設值 24）取代 SVG 固定的 width 和 height 值，讓您以任何尺寸使用元件：<MyIcon size={32} /> 或 <MyIcon size={16} />。

可以在 React 元件中使用自訂 SVG 屬性嗎？

可以。React 元件繼承自 React.SVGProps<SVGSVGElement>，因此您可以傳入任何有效的 SVG 屬性作為 prop：fill、stroke、className、aria-label 等，透過根 <svg> 上的 {...props} 展開都會傳入。

沒有子元素的 SVG 元素（如 <path>）會怎麼處理？

常見的空 SVG 元素（path、circle、rect、ellipse、line、stop 等）如果在原始碼中以 <elem></elem> 形式出現，會自動轉換為 JSX 要求的自閉合形式 <elem />。

這個工具能處理多色或複雜的 SVG 嗎？

可以。轉換器會處理 SVG 中所有的元素和屬性，不僅限於簡單的單路徑圖示。漸層、濾鏡、遮罩和群組都會完整保留，輸出是包裝在元件中的完整 SVG，不是簡化版本。