Vue项目中svg图的使用

转载：

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

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图文件放到对应的文件夹下即可使用

--------------------- 本文来自 quangezai666 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/quangezai666/article/details/78962616?utm_source=copy