svg图是可缩放矢量图，在页面中使用可以很好的提高用户体验

1、使用传统的svg图：

首先新建一个svg.vue文件，在该文件中使用svg标签定义一堆svg图，再分别用symbol标签分别定义一个个svg图，
再使用id来标记各个svg图，最后在需要实用的地方使用use标签绑定每个id即可使用svg图
具体的制作svg图可以参考svg图相关文档

2、在这里主要介绍使用插件使用svg图：

使用的插件是vue-svg-icon和Iconfont阿里巴巴矢量图标库去看看

使用vue-svg-icon时需要在Vue项目中安装vue-svg-icon

（1）npm install vue2-svg-icon --save-dev
（2）把你的svg图文件xxx.svg放到src/assets/svg下

（3）在入口文件main.js文件中配置：

import Icon from 'vue2-svg-icon/Icon.vue'

vue.component('icon', Icon)

（4）在Vue文件中使用svg：

使用icon标签即可，<icon name="xxx" :w="宽度" :h="高度"></icon>，其中name表示svg文件的文件名

3、可以到Icon阿里巴巴矢量图标库中下载svg图，再把svg图文件放到对应的文件夹下即可使用

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue