Today, when I used the Symbol code to reference ICONS, I found that some ICONS still displayed the original color after setting the color. This is because the part of SVG icon has a fill attribute, which cannot be modified locally (update can also be done after Webstorm opens SVG)<? xmlThe default color needs to be removed from the project because of the large number of SVG files.

As shown in the figure below, only the fonts change color; the SVG ICONS do not

Batch Solution 1

  • First find the appropriate icon and add it to the project
  • Click Batch operation

  • Select all, click batch desaturation

  • Then download it locally

  • You can now change the color normally

Batch Solution 2

  • Install the SvGo-Loader first
yarn add --dev svgo-loader
Copy the code
  • In the vue.config.js file, the config.module code is followed by the svGo-loader code (the O after SVG is an initial for “optimization”).
.use('svgo-loader').loader('svgo-loader') .tap(options =>({... options,plugins:[{removeAttrs:{attrs:'fill'}}]}))Copy the code