https://blog.csdn.net/weixin_41229588/article/details/101159755
一、配置
1.安装依赖:
npm install svg-sprite-loader --save-dev
2.配置build文件夹中的webpack.base.conf.js,主要在两个地方添加代码,如下图所示
exclude: [resolve('src/icons')],
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
3.在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue中内容如下
4.在src下新建icons文件夹,及icons文件夹下svg文件夹、index.js文件, index.js文件内容如下
5.在main.js中引入svg
import './icons'
二、使用
2.点击图片,下载svg格式即可,将下载下来的图片放置到到项目中的svg文件夹下
3.在页面中使用