Configure svgo to inline styles with >=1 matches

[msand]

N.B not tested yet

[msand]

https://www.smooth-code.com/open-source/svgr/docs/options/#svgo-config

/~https://github.com/svg/svgo/blob/72db8ebbbf5aa3ac82a32c5b744cb09deeba5e35/plugins/inlineStyles.js#L7-L25

software-mansion/react-native-svg#1153 (comment)

[kristerkari]

Thanks! Sounds good

[msand]

Interesting, at least in the svgr web interface, those settings seem to make it work

[kristerkari]

I tested this with the bones image from the react-native-svg repo, but it does not seem to work, even if I enable SVGO. Let me know how I can help with this.

[msand]

@kristerkari This seems to be working now

[kristerkari]

Thanks! I need to test it again. Btw. is it safe to enable SVGO for everyone? Does it have any known bugs?

[msand]

I haven't seen any bugs with this configuration, it's possible to give more aggressive options which can be buggy. But this set of options should only make more content compatible with react-native-svg, more specifically, any content with css style elements, having selectors which match more than a single element. This makes react-native-svg-transformer do essentially exactly the same thing as the new SvgCss component in react-native-svg, but at build time instead of runtime.

[msand]

The plain / default svgo configuration only inlines declarations from css rules where the selector matches exactly one element. Any selector which matches two or more element won't become inlined, and thus will render incorrectly in react-native-svg.

[kristerkari]

I haven't seen any bugs with this configuration, it's possible to give more aggressive options which can be buggy. But this set of options should only make more content compatible with react-native-svg

Okay, sounds good! I'm going to include this in the next release.

[kristerkari]

Thanks! Released in version 0.14.0

[kristerkari]

@msand It looks like this ended up being a breaking change after all. I noticed in my app that the default width/height of the SVG images not being applied anymore.

[kristerkari]

Looks like that happens because viewBox gets removed.

Adding removeViewBox: false fixes it:

var defaultsvgrConfig = {
  native: true,
  plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
  svgoConfig: {
    plugins: [
      {
        inlineStyles: {
          onlyMatchedOnce: false
        }
      },
      {
        removeViewBox: false
      }
    ]
  }
};

Should we add that @msand ?