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{
  width: 24px;
  height: 24px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

也可以這樣改變大小：

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

Tip：svg圖是可縮放的矢量圖，在頁面使用可以很好的提高用戶體驗