Vue-cli 3 使用SVG 的簡單步驟

1.在對應vue項目裡添加插件

vue add svg-sprite

2.再執行：

npm install svgo svgo-loader --save-dev

然後你就會看到新增的根目錄文件vue.config.js和src/components/SvgIcon.vue,如圖：

3.在main.js裡註冊SvgIcon組件

//引入svg組件
import SvgIcon from '@/components/SvgIcon.vue' 
//全局註冊icon-svg
Vue.component('SvgIcon', SvgIcon)

4.再在assets下創建icons文件夾，將所有的svg圖標放進去，name就是svg的名字，例如

好了，這樣我們就可以愉快的使用SVG了。

最後，如果項目不能成功顯示SVG，可以嘗試重新打開一次。