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

<template>
    <svg :class="['svg-icon', svgClass]" aria-hidden="true" @click="triggerCallback">
        <use :xlink:href="svgHref" />
    </svg>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class Svgicon extends Vue {
    @Prop({ default: '' })
    public propClass: string;
    @Prop({ default: {} })
    public propHref: {
        type: string;
        required: true;
    };
    public get svgClass() {
        return this.propClass ? `svg-icon-${this.propClass}` : '';
    }
    public get svgHref() {
        return `#svg-icon-${this.propHref}`;
    }
    public triggerCallback() {
        this.$emit('click');
    }
}
</script>

<style lang="scss" scoped>
.svg-icon {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor; //此属性为更改svg颜色属性设置
    overflow: hidden;
}
</style>

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

<SvgIcon class="svg-icon-wifi" propHref="wifi" />
.svg-icon-wifi {
    width: 25px;
    height: 25px;
    margin-right: 3px;
}