该文章是在vue-cli4脚手架环境下写的
首先,在vue项目里使用的话需要先安装一下,代码如下
npm install svg-sprite-loader -D
yarn add --dev svg-sprite-loader -D
个人建议网络不好的还是用yarn,毕竟还是快一点
在vue.config.js中加入以下代码
![v2-9018ee647100b36c0cea4a1c3173a9b1_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=7d57aadc-552e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-9018ee647100b36c0cea4a1c3173a9b1_b.jpg)
然后在页面中import引入就可以直接引用,代码如下
<
svg-sprite-loader会把svg变成symbol,symbol对应的id为label,并在symbol外套一个svg,在body里生成。
以上是使用单个svg,那么要使用多个的话,这样一个一个引入岂不是很麻烦,于是乎继续找度娘,看大神们有何高见
可以单独封装一个icon组件