Vue中svg图标的使用

1.安装

npm install vue-svg-icon -- save-dev

2.将svg图片放入src/svg

这里安利一个svg图片库iconfont
src/svg路径暂时不可配置
src文件夹应和node_modules在同一个文件夹下

3.在项目的main.js入口引入vue-svg-icon和需要使用的svg文件名（不需扩展名）

import Icon from 'vue-svg-icon/Icon'
Vue.component("icon",Icon)

4. 在网页中使用icon标签就可以啦！

<icon  name="time"></icon>
<icon name="back"></icon>
<icon  name="address"></icon>
<icon name="plan"></icon>

name的值就是svg图片名字

效果：

可以通过类来改变图标的颜色和大小：

.svg-icon{
   24px;
  height: 24px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

也可以这样改变大小：

<icon  name="time" width="20px" height="20px"></icon>

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