Remove Style Element is an essential SVGO Plugin

First of all, thank you for this loader, it’s a great idea!

I want to load several SVG icons using this loaded, but it always removes the <style> Element of the SVG, which is not what I want. I need the <style> Element to stay in place as it contains icon-specific options. I tried to disable the corresponding SVGO plugin using

            query: {
              svgo: {
                plugins: [
                  { removeStyleElement: false },
                ]
              }
            }

But this has no effect. Digging deeper, I noticed that removeStyleElement is a core plugin:

var essentialPlugins = ["removeDoctype", "removeComments", "removeStyleElement"];

It seems that I have no possibility to disable this plugin, is that correct? In this case, I could no longer use this project, which is quite sad. Is there really no option to disable removing the <style> element?

[butchler]

If the SVGO version this loader uses is updated (see https://github.com/boopathi/react-svg-loader/issues/192), then you could use the new inlineStyles SVGO plugin (https://github.com/svg/svgo/blob/master/plugins/inlineStyles.js) to automatically convert everything in <style> to inline attributes on the individual paths/etc. (essentially the same approach as saving the SVG with inline CSS in your editor, but done via this loader for you automatically).

[niyan-ly]

if you are using adobe illustrator, you can change the svg styling format to “inline-css” via change the Asset Export panel’s setting. And in sketch and Affinity Designer, it’s a default option of using “inline-css”