SVG Forge

SVG 转 Vue 组件

把任意 SVG 变成一个 Vue 3 单文件组件。

或把文件拖进来 / 在下方粘贴代码

输出是 Vue 3 script-setup SFC；属性会透传到根 SVG 元素。

Vue 3 SFC
输出会显示在这里

使用方法

  1. 1粘贴 SVG 代码，或拖入一个 .svg 文件。
  2. 2工具会把它包装成带属性透传的 Vue 3 SFC。
  3. 3把 .vue 文件内容复制进你的项目。

免费、无需注册、没有水印——一切都在你的浏览器本地运行，文件绝不会离开你的机器。

常见问题

Vue 2 还是 Vue 3？

输出面向 Vue 3 的 script-setup SFC，在 Vue 2.7 项目里同样可用。

相关工具

SVG 转 React

粘贴 SVG，得到可直接 import 的 JSX 或 TSX 组件。

SVG 优化器

SVGO 驱动的清理：文件更小，像素照旧。省了多少一眼可见。

SVG 转 CSS

把任意 SVG 以编码后的 data URI 内联进你的样式表。