vue项目中更改svg颜色

记录一次组件库开发过程中，项目组使用的icon全部为svg图片，要实现颜色更改。 主要依赖于svg-sprite-loader插件。

实现过程：

1、vue.config.js配置

注：经过svg-sprite-loader处理的svg图片，不可使用img标签进行渲染。

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

2、更改svg图片属性

修改svg图片代码中的fill或者stroke属性为currentColor。

3、全局导入需要处理的svg图片

// 可在main.js中导入，也可在icon组件中单独导入
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./assets", true, /.svg$/);
requireAll(req);

4、icon组件

<template>
    <svg class="svg-icon" aria-hidden="true" :style="style">
        <use :xlink:href="iconName" />
    </svg>
</template>
<script>
export default {
    name: "svg-icon",
    props: {
        // 当前 svg 的文件名，如 arrow-left.svg，该值就应该是 arrow-left
        name: {
            type: String,
            required: true
        },
        // 颜色值
        color: {
            type: String,
            default: "#999999"
        }
    },
    computed: {
        iconName() {
            return `#icon-${this.name}`;
        },
        style() {
            return { "--color": this.color };
        }
    }
};
</script>
<style lang="scss" scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
    color: var(--color);
}
</style>

5、使用组件

不传颜色值的情况，默认值为#999999：

<svg-icon name="close" class="test"></svg-icon>

传递颜色值后：

<svg-icon name="close" class="test" color="red"></svg-icon>

另：图标大小改变、图标增加右上角徽标等其它功能可在此基础上扩展。

至此，完成使用svg实现icon组件。

共勉！文中若有不足之处，万望告知。希望本篇文章对你也有帮助，你的👍就是对我的最大支持^_^