- 发现是 有些svg 中path下会有fill属性
- 方法一: 下载下来 手动进行 把该属性 删除 或者 修改为class
- 方法二: 通过svg-loader进行 批量删除
在vue.config.js进行svg的配置 指定使用 指定文件下的svg。并且删除svg,path下的fill属性
config.module.rule("svg").uses.clear(); // 清空默认的对 SVG 文件的处理方式
config.module.rule("svg").exclude.add(resolve("src/icons")).end(); //排除掉 src/icons 目录下的所有 SVG 文件,以免它们被默认规则处理;
config.module
.rule("icons") // 创建一个新规则 .rule('icons') 来专门处理 src/icons 目录下的 SVG 文件;
.test(/\.svg$/) // 匹配所有以 .svg 结尾的文件;
.include.add(resolve("src/icons"))
.end() // 限定只处理 src/icons 目录下的 SVG 文件;
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]", // 表示生成的每个图标在 SVG sprite 中的 ID 格式为 'icon-图标名';
})
.end() // 添加 svgo-loader 来进一步优化 SVG 文件
.use('svgo-loader')
.loader('svgo-loader')
.options({
plugins: [
{ removeAttrs: { attrs: 'fill' } } //删除 path 标签中的 fill 属性
]
}).end();