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。(如果这一步还是不管用，可以直接删掉fill这个属性或者设置fill="none",一个svg图片中可能有多个fill属性，全部改变试一下)

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组件。