BrowserDevTools

SVG → Vue 3 元件

貼上 SVG 或拖入一整個圖示資料夾。你會取得帶有 size 與 title props、currentColor 佈景主題與 id 前綴的 Vue 3 <script setup> 元件。沒有任何東西離開你的瀏覽器。

→ ClockIcon.vue

選項

輸出

目前顯示未最佳化的輸出——正在取得 SVGO 最佳化器（隨需載入，讓本頁保持輕量）…

原始 SVG
253 B
最佳化後 SVG
—
元件
801 B
id 已加前綴
0
<script setup lang="ts">
// ClockIcon — 由 SVG 產生，可自由修改。
defineOptions({ inheritAttrs: false });

withDefaults(
  defineProps<{
    /** 無障礙標題：提供時會渲染 <title>，否則對讀屏器隱藏。 */
    title?: string
    /** 任意 CSS 長度，例如 "24px" / "1.5rem"。 */
    size?: string | number
  }>(),
  { title: '', size: '1em' },
);
</script>

<template>
  <svg
    v-bind="$attrs"
    role="img"
    :aria-hidden="title ? undefined : 'true'"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
  >
    <title v-if="title">{{ title }}</title>
    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
    <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  </svg>
</template>

圖示集流程

拖入多個 .svg 檔 → 取得 .vue 檔加上一個 index.ts barrel，壓縮成 ZIP。不會上傳任何東西。

為什麼會有這個轉換器

搜尋「svg to react component」，第一個結果是官方的 SVGR playground；頁面其餘部分是早就做到瀏覽器端轉換、SVGO 最佳化與批次 ZIP 匯出的第三方轉換器。搜尋「svg to vue component」，你會得到一個 GitHub 函式庫、幾篇 Stack Overflow 回答與部落格文章——但幾乎沒有能直接打開來用的工具。這個不對稱就是本頁存在的原因。

第二個原因是，天真的轉換器給你的是標記，不是元件。一個堪用的圖示元件需要四件貼上複製型網站通常會略過的事：

最佳化在瀏覽器中透過 SVGO 執行，並刻意保留 removeViewBox 啟用，讓 size prop 持續運作。如果來源中有東西無法忠實轉換——內嵌 <style> 區塊、SMIL 動畫參照、script 標籤——工具會告訴你，而不是默默產生壞掉的程式碼。

常見問題

SVG 會被上傳到任何地方嗎？
不會。轉換、SVGO 最佳化與 ZIP 打包全部都在你的瀏覽器分頁中執行。沒有後端端點會接收你的檔案，你可以在 Network 面板中自行驗證。
為什麼產生 Vue 3 SFC，而不是 JSX 或 React 元件？
因為那就是缺口。大多數線上轉換器輸出 React/JSX 或純 SVG 字串；Vue 3 <script setup> 元件——具備 props 傳遞、currentColor 佈景主題與 id 前綴——在搜尋結果第一頁中幾乎找不到。
「為 id 加前綴」解決了什麼？
含有漸層、裁剪路徑或遮罩的 SVG 檔會定義內部 id，並以 url(#id) 參照它們。如果你把三個這樣的圖示放在同一頁，那些 id 會衝突，其中一個圖示會渲染出另一個的漸層。為每個 id 加上元件名稱前綴就能消除衝突。
我可以一次轉換整個圖示資料夾嗎？
可以。拖入多個 .svg 檔，你會得到每個圖示一個 .vue 檔加上一個 index.ts barrel，打包成 ZIP——不必反覆複製貼上，也不必等上傳。
產生的程式碼可以編輯嗎？
它是純 Vue 3 原始碼，沒有執行時期相依、沒有包裝元件，也沒有授權金鑰。就把它當成你自己的程式碼：重新命名、拿掉 props，或提交進你的設計系統。