vue中使用svg-sprite-loader处理svg图片

网上已经有很多文章写了相似的例子，不过自己实践之后还是把过程记录下来，这样知识就是自己的了。

版本：@vue/cli 4.4.1

实现内容：1.vue载入svg 2.能够更改svg样式 3.svg无限旋转

1.使用的loader：svg-sprite-loader、svgo-loader

我们在vue.config.js文件里找到chainWebpack属性，添加如下代码：

chainWebpack: config => {
   
    // ......
    config.module
        .rule('svg')
        .exclude.add(resolve('src/assets/icons/svg'))
        .end();
    config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/assets/icons/svg'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
   
            symbolId: 'icon-[name]',
        })
        .end();
    // .......

2.需要安装的loader：svg-sprite-loader、svgo-loader

npm i svg-sprite-loader svgo-loader -D

3.引入svg图片

我们在src/assets下新建icons文件夹，文件夹里再新建svg文件夹，将svg图片放至svg文件夹里。（具体路径可根据自己习惯配置）

4.统一引入svg图片

在src下新建icons文件夹，新建index.js文件（要注意路径的配置）：

const req = require.context('@/assets/icons/svg/', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

5.在main.js中引入

import './icons';

6.在组件中使用

<!-- #icon-  为icon的前缀，XXX为icon名称 -->
<svg>
    <use