vue項目使用svg圖片

1、下載SVG圖片 

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

選擇而後下載圖標

二，把圖標放到項目中

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

3、安裝插件，而且配置package.json

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

npm install vue-svgicon --save-dev

配置好後，執行  npm run svg, 獲得下圖結果

4、配置main.js

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

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

5、在.vue文件中使用SVG

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

6、結果