第一種

• 使用vue2-svg-icon
  npm install vue2-svg-icon --save-dev

• 下載之后在mian.js引入

  名字可以隨便起，這里我起icon

• 引入svg資源

  這時注意：網上有人說直接在src/根目錄引入svg資源，也有人說在src/assets/根目錄引入svg資源，兩個應該都是對的，可能因為webpack版本不同，svg引入的路徑就不同，因此這兩種引入方式都試試，我項目webpack版本是2.96的，我在src/assets/引入資源成功，在src/引入svg資源報錯。

• 使用svg圖片

  此時只需要把 icon當作一個標簽使用即可，name屬性指定svg相應資源的名字，不要帶后綴名，w、h指定svg圖的寬高。

• 效果圖

第二種

第二種我還沒有使用過，下一次使用在補上，使用 svg-sprite-loader。

轉載于:https://www.cnblogs.com/HJ412/p/11094986.html

總結

以上是生活随笔為你收集整理的svg图片在vue脚手架vue-cli怎么使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。