SVG 转 Vue
将 SVG 转换为 Vue 单文件组件 (.vue)。
松开鼠标即可转换为 Vue 组件
支持将 SVG 文件拖入页面任意位置，工具会自动生成 Vue 组件代码
文件名称
{{ sourceName || '未命名 SVG' }}
源码长度
{{ sourceText.length || 0 }} 字符
结果长度
{{ outputText.length || 0 }} 字符
当前状态：{{ outputStats || '等待转换' }}
转换说明：会保留 SVG 结构，并支持根节点属性透传、颜色替换和 Vue 组件脚本输出。
SVG预览
{{ outputMode === 'vue2' ? 'Vue 2 输出' : 'Vue 3 输出' }}Vue 代码
{{ outputStats || '未生成代码' }}{{ outputText || '暂未生成 Vue 代码' }} SVG转Vue工具介绍
SVG转Vue工具用于将原始 SVG 代码快速转换为 Vue 组件代码，适合 Vue 2、Vue 3、组件库开发、后台系统图标封装、前端页面接入和设计资源转开发等场景。您可以上传 SVG 文件、拖拽 SVG 到页面任意位置，或者直接粘贴 SVG 代码，工具会自动输出可复制、可下载的 Vue 组件源码。
当前工具支持生成 Vue 2 组件和 Vue 3 组件，能够保留原有 SVG 结构，并支持根节点透传属性、宽高绑定和 `currentColor` 颜色替换，方便在 Vue 项目中直接复用。
SVG转Vue工具功能特点
- 支持上传 SVG 文件、整页拖拽上传和直接粘贴 SVG 代码。
- 支持生成 Vue 2 组件代码和 Vue 3 组件代码。
- 支持保留原始 SVG 标签结构和常用属性内容。
- 支持根节点透传 `$attrs`，便于在外部继续控制类名和样式。
- 支持根节点宽高绑定和颜色替换为 `currentColor`。
- 支持复制代码、下载结果和代码预览，便于快速接入项目。
SVG转Vue工具怎么用
- 上传 SVG 文件，或将 SVG 文件拖入页面任意位置。
- 如果已有源码，也可以直接粘贴 SVG 代码到输入区域。
- 填写组件名称，并选择要生成 Vue 2 组件还是 Vue 3 组件。
- 根据项目需要开启脚本输出、根节点透传属性、宽高绑定和颜色替换。
- 点击生成 Vue 代码，工具会自动输出对应的 Vue 组件源码。
- 确认结果后，可以复制代码、预览代码或下载组件文件。
适用场景
- 将设计师提供的 SVG 图标快速封装为 Vue 组件。
- 为 Vue 2 后台系统和 Vue 3 项目统一管理图标资源。
- 在组件库、设计系统和业务页面中沉淀可复用的 SVG 组件。
- 将 SVG 插画、状态图、功能图标转换成可维护的 Vue 源码。
- 统一图标颜色、尺寸和外部属性传递方式，提升开发效率。
工具优势
- 在线即可完成 SVG 转 Vue，无需安装本地转换插件。
- 同时支持 Vue 2 与 Vue 3，适配更多项目环境。
- 输出结果结构清晰，便于后续手动调整和二次封装。
- 支持颜色替换和宽高绑定，适合图标体系规范化管理。
- 适合前端开发者、组件库维护者和设计开发协作团队长期使用。
常见问题
SVG转Vue后可以直接在项目中使用吗？
大多数情况下可以直接使用。当前工具会保留 SVG 主体结构，并生成适合 Vue 项目接入的组件代码，您只需按项目规范保存文件即可。
为什么要透传 `$attrs`？
透传 `$attrs` 后，组件外部可以继续传入类名、样式或其他属性，便于图标组件在不同页面中复用。
什么时候适合把颜色替换成 `currentColor`？
当您希望图标跟随文字颜色、主题色或按钮颜色自动变化时，使用 `currentColor` 会更方便统一维护。
这个工具更适合 Vue 2 还是 Vue 3？
两者都适合。当前工具支持输出 Vue 2 组件和 Vue 3 组件，您可以根据现有项目框架选择对应模式。