SVG → Vue
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
单文件组件（.vue）
组件名取自文件名。script 块只是给组件起个名字 —— 用不上就删掉。
模板块
只有标记本身，适合粘进您已有的组件里。如果原 SVG 里带有内联的 style 元素，它的 CSS 在上面那份文件的 style 块中，不在这里。
OneImageTool
图片工具一站搞定 — 免费、无需上传
SVG → Vue
把任意 SVG 包成 .vue 单文件组件 —— 或者只取模板块，粘进您已有的组件里。
或点击浏览 —— 仅限 SVG
组件名取自文件名。script 块只是给组件起个名字 —— 用不上就删掉。
只有标记本身，适合粘进您已有的组件里。如果原 SVG 里带有内联的 style 元素，它的 CSS 在上面那份文件的 style 块中，不在这里。
无需重命名
Vue 模板是按 HTML 解析的，所以 SVG 可以原封不动地放进去。stroke-width 还是 stroke-width，class 还是 class，内联的 style 属性照常生效。转换基本上只是把文件包一层 —— 这也是输出看起来和输入几乎一样的原因。
剩下的交给属性透传。只要根元素只有一个，您加在组件上的任何属性都会落到 svg 标签上，因此 width、class 或点击事件不用声明任何 prop 就能用。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
整个 .vue 文件，或者只要模板。
像用任何组件那样 import，尺寸从外部控制。
快速解答
因为不需要。单根组件会把您给它的任何属性直接透传到 svg 标签上，所以 width、height、class 和事件监听本来就能用。只有当您想基于某个值再做计算时，才需要声明 props。
只是给组件起个名字，这个名字会出现在 Vue devtools 和警告信息里。没有它组件渲染结果完全一样，删掉非常安全。
被移到了组件底部的 scoped style 块里。Vue 会丢弃模板内部的 style 和 script 标签，而从 Illustrator 或 Figma 导出的 SVG 几乎总是带着一份内联样式表 —— 不搬出来的话，渲染出来会所有颜色全失。搬到外面既保证它继续生效，scoped 又保证它不会泄漏到应用的其余部分。
把写死的 fill 或 stroke 换成 currentColor，再在父元素上用 CSS 设置颜色。转换之前也可以先用 SVG 换色工具，把文件里所有颜色一次性换成 currentColor。
就这份输出而言，是的 —— script setup 和 defineOptions 是 Vue 3 的特性。在 Vue 2 上模板块依然可用：把它粘进一个普通 options API 组件的 template 里即可。
不会。转换只是在您的浏览器里做的字符串处理。