vue从阿里图标下载的svg 无法修改其颜色，解决

最新推荐文章于 2024-03-12 10:59:50 发布

要不，在试一下

最新推荐文章于 2024-03-12 10:59:50 发布

阅读量1k

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_36571836/article/details/130772193

版权

发现是有些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();