vue項目使用svg圖片

一、下載SVG圖片 

鏈接：Iconfont-阿里巴巴矢量圖標庫：http://www.iconfont.cn/

選擇然后下載圖標

二，把圖標放到項目中

本人使用的是腳手架 vue init webpack-simple創建的項目

三、安裝插件，並且配置package.json

參考鏈接：https://www.npmjs.com/package/vue-svgicon

npm install vue-svgicon --save-dev

配置好后，執行  npm run svg, 得到下圖結果

四、配置main.js

import SvgIcon from 'vue-svgicon'
import './icons'   //引入svg-icon

Vue.use(SvgIcon, {
  tagName: 'svgicon'
})

五、在.vue文件中使用SVG

 <svgicon name="svg-home" width="200" height="200"></svgicon>

六、結果