svg如何修改颜色，封装svg组件

1.安装插件

npm i svg-sprite-loader -D

2.配置vue.congfig.js

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir);
}
chainWebpack: config => {
        // svg处理
        // 清除cli3自带的svg规则（使用了file-loader，并且把路径指定为在img文件夹下）
        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule.include
            .add(resolve('src/assets/svg'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .tap(options =>
                Object.assign(options || {}, {
                    symbolId: 'svg-icon-[name]',
                })
            );
        const fileRule = config.module.rule('file');
        fileRule.uses.clear();
        fileRule
            .test(/\.svg$/)
            .exclude.add(resolve('src/assets/svg'))
            .end()
            .use('file-loader')
            .loader('file-loader');
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options =>
                Object.assign(options, {
                    limit: 10240,
                })
            );
}

3.在main.ts里面引入svg

// svg图标
import '@/assets/svg';

4.svg文件夹下加入index.ts

const req = require['context']('.', true, /\.svg$/);
const reqAll = requireContext => requireContext.keys().map(requireContext);
reqAll(req);

5.注册组件（我这里使用的是全局组件注册，就不单独写了，如果需要了解，可以看我的文章（如何全局注册组件））
6.组件SvgIcon.vue

7.组件的使用(propHref为你的svg文件的名字)

.svg-icon-wifi {
    width: 25px;
    height: 25px;
    margin-right: 3px;
}