Class names are getting changed. I need them to remain the same.

💬 Questions and Help

I am importing several svgs into my project using svgr. Every svg file has classes called icon-fill or icon-stroke that allows them to be colored appropriately.

Somewhere else in my project I have this css set:

   .icon-stroke {
      stroke: currentColor;
    }
    .icon-fill {
      fill: currentColor;
    }

This makes the icons all correctly inherit the color property of their parent.

---

The problem

is that all the class names in my svgs are getting changed to have the file name prepended to the class name. For example, one of the file names is ChevronLeft.svg so the class name is getting rewritten to ChevronLeft_svg__icon-fill. This is causing my svgs to no longer be colored correctly.

I have looked through the docs and I do not see a way to turn this off.

Is there a way I can fix this so that the class names are left as is?

[gregberge]

To clarify, noSvgo: false is not correct. svgo: false is.

[jisaacks]

@guillaumebrunerie Thanks for pointing that out, For anyone else who comes upon this, it was tricky to figure out how to actually apply it.

For example:

import svgr from '@svgr/rollup'

export default {
  plugins: [
    svgr({
      noSvgo: true,
    })
  ]
}

Does not work. I have also tried '--no-svgo': true and 'no-svgo': true here.

I also tried adding this to my project root

// svgr.config.js
module.exports = {
  noSvgo: true
}

Also tried adding this to my package.json:

"svgr": {
    "noSvgo": true
  }

None of the above worked, however this did (added to project root):

// svgo.config.js
module.exports = {
  prefixIds: false
}