Svgr: style support react-native

[7ynk3r]

🐛 Bug Report

I'm converting a SVG (with styles) into a react-native component. In the transformation the styles get lost and it makes sense (in some sense) given that react-native-svg doesn't have a tag for style.

What is the best course of action here? Is it possible to make svgr de-style the SVG before converting it? I don't want designer having to alter their work before providing it to devs.

To Reproduce

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.95 254.9"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-1,.cls-2,.cls-3,.cls-4{stroke:#8cd3f8;stroke-width:3px;}.cls-1,.cls-3,.cls-4{stroke-linecap:round;}.cls-1,.cls-2{stroke-miterlimit:10;}.cls-3,.cls-7{fill:#c2e8ff;}.cls-3,.cls-4{stroke-linejoin:round;}.cls-5{fill:#8cd3f8;}.cls-6{fill:#fff;}</style></defs><title>einstein_empty_state_clear</title><line class="cls-1" x1="29.24" y1="236.18" x2="129.3" y2="236.18"/><line class="cls-1" x1="221.59" y1="236.18" x2="285.45" y2="236.18"/><line class="cls-1" x1="21.81" y1="236.4" x2="1.5" y2="236.4"/><path class="cls-2" d="M87,258.43c18.11-8.75,18-25.57,18-25.57s11.49,3.3,18.28-1.34c0,0-6.91,15.53-11.95,27.12Z" transform="translate(-6.52 -22.25)"/><path class="cls-1" d="M187,275.42c12.9,1.86,35.22-8,39.74-14.58a4.78,4.78,0,0,0,.69-1.34c2.06-6.55-2.87-20.84-9-33.93a49.11,49.11,0,0,0-17-19.67s-5,7.17-26.14,11.49a236,236,0,0,1-43.73,4.06,121.22,121.22,0,0,0-19.71,37.23h24s9.1-11.11,36.68-12.38S190,270.21,190,270.21Z" transform="translate(-6.52 -22.25)"/><path class="cls-2" d="M169.75,212.19h6.19l-.76,5.52-14.84,25.81-9.56-18.42-2.17-1.62-13.36,19.12s-4.54-11-3.54-18.52c.45-3.42-.12-6.17,2.39-7.48C134,216.66,155.32,230.71,169.75,212.19Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M146.57,226l-8.65,13.21s.6,6.93,4.06,10.23l9.39-10.35L151.21,226Z" transform="translate(-6.52 -22.25)"/><path class="cls-2" d="M111.78,258.7c3.9-13.31,12.33-29.85,20.29-37.83l2.08,3a238.29,238.29,0,0,0-16.3,34.84" transform="translate(-6.52 -22.25)"/><path class="cls-4" d="M170.83,246.46c-13.17.93-33.69,5.28-34.43,14.34h0v.29c-.55,4.92,17.56,11.66,31.78,12.66,9.41.67,8.27-6.12,20.77-4a16.25,16.25,0,0,0,3.25-9c0-7.34-3.35-16.25-19.69-14.5Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M224.71,241.23a41.41,41.41,0,0,0-8.79,19.62,23.51,23.51,0,0,0,0,7.77s8-2.75,11-7.77a8.29,8.29,0,0,0,.69-1.43C229.73,253.58,224.71,241.23,224.71,241.23Z" transform="translate(-6.52 -22.25)"/><path class="cls-4" d="M172.9,246.25s6.86-6.14,20.55-7.57a116.92,116.92,0,0,1,4.21-14.91" transform="translate(-6.52 -22.25)"/><path class="cls-1" d="M209.27,195.66c-6.74,12.21-19.12,21.29-38,20.74-5.88-.17-11.95,1.34-18.18.86-23.9-1.82-47.05,1.1-51.95-29l-3.32-26.88,19.12-31.42h39.43l41.34,10.44,16.73,21-5,34.31" transform="translate(-6.52 -22.25)"/><ellipse class="cls-5" cx="123.96" cy="184.04" rx="7.19" ry="4.78" transform="translate(-75.51 271.36) rotate(-85.63)"/><ellipse class="cls-5" cx="170.28" cy="184.05" rx="7.19" ry="4.78" transform="matrix(0.08, -1, 1, 0.08, -32.73, 317.56)"/><path class="cls-6" d="M74.52,184.62s-3,2.39-6.52,5.64a16.56,16.56,0,0,0,.14,4.21,9.56,9.56,0,0,1,1.48-3.3A19,19,0,0,1,74.52,184.62Z" transform="translate(-6.52 -22.25)"/><path class="cls-6" d="M207.62,186.39A91.28,91.28,0,0,1,206.38,199l1-1A87.05,87.05,0,0,0,207.62,186.39Z" transform="translate(-6.52 -22.25)"/><path class="cls-6" d="M76.48,193.82c-2.15,4-2.87,7.43-.31,5.3,1-.84,2.39-2.2,4.18-3.68a12,12,0,0,1,2.6-2.22l.57-.45A25.23,25.23,0,0,0,76.48,193.82Z" transform="translate(-6.52 -22.25)"/><path class="cls-6" d="M70.49,80.22l-3.11-1.65a11.06,11.06,0,0,0-.81,1.91A14,14,0,0,1,70.49,80.22Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M175.57,53.27l.09.32Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M133.77,29a5.61,5.61,0,0,0-2.15-4.79l-.1,0A5.61,5.61,0,0,1,133.77,29Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M123.6,30.61a15.91,15.91,0,0,0-.29-3.45A28,28,0,0,1,123.6,30.61Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M148.81,40.8a6.3,6.3,0,0,0,.08-.74,6.17,6.17,0,0,1-.1.82Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M133.28,30.41c0,.08,0,.16,0,.24C133.3,30.57,133.3,30.49,133.28,30.41Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M176.65,57.37c0,.1,0,.2.06.3C176.69,57.57,176.67,57.47,176.65,57.37Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M176.14,55.27c0,.14.07.28.1.42C176.21,55.55,176.18,55.4,176.14,55.27Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M177.08,59.6v0Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M259.71,172.61l-.44-.3C256.35,143.76,233,127.84,233,127.84c9.16,1.51,14.2,2,17.57,7.57,4.84,5.2,6.62,12.62,6.62,12.62,0-.18,0-.35,0-.53l-.18-.67c-2-29.94-15-33.45-15-33.45-1.43-6.28-21.51-20.45-21.51-20.45l14.19,2.56c0,.08.42.65,1,1.46l7.72,1.48,0-.05-3-.55c-18.59-40.29-63.3-23.9-63.3-23.9-1.12-28-19.31-35.17-19.31-35.17s-1.08,11.61-1.46,8.05-6.14-6.5-6.14-6.5L148.77,48c1.65-9.06-17.28-16.73-17.28-16.73,2.25,1.55.6,5.33.6,5.33-.07-3.9-5.49-4.61-8.46-5.34,0,1.75,0,3.6.05,5.41a14.57,14.57,0,0,1-.13,1.79,27.3,27.3,0,0,1-.83,5.35v0C122,47.9,121,53.1,119.91,58.22c-3.21,17-4.62,26.87-4.62,26.87C99.69,68,81.67,70.52,71.61,73.65l1.62.86c-4.95-.17-6.67,6-6.67,6,10.76-2.22,14.24,8,14.67,9.39l.69-.19a7.48,7.48,0,0,1,1.55,6.93c-25.54,3.25-37.71,37.09-41,52.24l-1.34.29s0-.34.12-1c-.1.64-.14,1-.14,1,16-3.94,21.51,5.62,21.51,5.62s9.75-1.25,8.88-.23c.38.19,10,5.1-7.71,9.79-11.95,3.2-14.84,15.8-15.34,24C48.29,186,47,165.84,59.76,158.81c1-.44,2.79-1.13,4.72-1.82l-.63.17C45.68,162,48.45,188.54,48.45,188.54L58.85,187s-.74,3.56-1.19,6.62c3.06-4.73,16.87-16.18,16.87-16.18A18.71,18.71,0,0,0,68,194.56c2.25-9.51,15.82-9,15.82-9-6,2.2-12.55,17.47-7.77,13.53s18.85-18.83,26-7.91c0,0,2-33.81,10.28-33.43,0,0,3.63,6.07,6.5,6.36.55,0,.24-17.09,9.92-21.22,0,0,30.78,16.49,35.41,9.56-1-.88-12.38-6.81-11.23-11.95.65-3,25.78.48,33.74,26.29,1.74,1.39,5.14-2.89,6.64-9.56,2.82-12.47,7.62,22.51,7.74,23s2.75-.41,5.3-3.25.76,19.55,0,21.94l2.56-2.68c6.24-7.29,29.34-9,29.34-9l7.48,3.75-1.34-3.78c9.44,1,11.57,6,11.57,6,2.28-10.36,0-17.42-2.63-21.81,1.62,5.64,3.73,13.78,3.38,17.15-1.31-11.28-15.17-26-15.17-26a25.16,25.16,0,0,1,10.25,3.61l.41,1.35a40.61,40.61,0,0,1,7.5,5.22C259.72,172.78,259.71,172.7,259.71,172.61Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M241.72,105.66a12,12,0,0,0-3.3-4.76C239.79,102.86,241.14,104.79,241.72,105.66Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M79.91,90.25c-17.65,3-27.61,20.61-33,35.8C52.16,112,62,95.71,79.91,90.25Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M254.73,146.3c1,3,2,6.05,2.33,6.85A55.23,55.23,0,0,0,254.73,146.3Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M122.23,23.75h0c0,.05.05.12.08.17Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M64,69.61a46.83,46.83,0,0,1,21-5.27,46.9,46.9,0,0,0-21,5.27l7.32,3.88Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M128.61,25.79c2.23,1.06,4.28,2.55,4.66,4.55C132.9,28.34,130.85,26.85,128.61,25.79Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M115.58,78.28v0c-8-8.68-16.65-12.39-24.54-13.52C98.94,65.88,107.58,69.58,115.58,78.28Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M123.5,194.61l.74-.19Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M121.42,195.4l.63-.29Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M119.44,196.62l.51-.38Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M120.42,196l.58-.34Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M118.51,197.41,119,197Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M127.61,194.13c-.3,0-.6,0-.9,0C127,194.12,127.31,194.12,127.61,194.13Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M124.57,194.36l.8-.13Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M127.77,194.13c.32,0,.64,0,1,.06C128.41,194.16,128.09,194.14,127.77,194.13Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M125.64,194.21c.28,0,.57-.06.85-.07Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M118,197.9l-.39.43Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M122.45,195l.69-.24Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M113.24,208.88l0-.24Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M112.77,213.44v0Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M112.95,211.06l0-.16Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M116.79,199.38l.33-.44Z" transform="translate(-6.52 -22.25)"/><path class="cls-7" d="M152.26,207.56c-2.39,1.82-5.42,4.28-14.34-2.7-6.27-4.79-23.57-8.55-25.12,14.92,0,.7.07,1.39.13,2.12,0,0,1.41-5.28,4.78-5,0,0-1.41,8.27,2.92,10,0,0,2.08-8.24,5.4-6.4,0,0,6.19,10.13,11.64,10.85,0,0-1.41-7.17,2.17-7.17l5.47,8.24,5.35-9.3s3.8,4.28,1.36,6.14a6,6,0,0,0,6.12-5.42s6.24,2.22,5.09,7.81a9.94,9.94,0,0,0,4.56-9.1l5.23,6.83,1.48-11.09s8.67,3.32,8.77,7.17a17.13,17.13,0,0,0-2.78-13.75C173.48,206.2,162.23,200.14,152.26,207.56Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M116,200.57l.27-.44Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M115.31,201.91l.21-.43Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M114.11,205.05l.11-.36Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M114.67,203.4l.16-.4Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M113.63,206.88l.07-.31Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M129.37,170.85s1.36-9.56-5.4-8.84a3.49,3.49,0,0,1,1.55,4.33s-3.68-11.21-18,0c0,0,4.78-1.74,6.45-.74,0,0-6.43.55-6.62,4.11,0,0,2.7-.74,3.56.19,0,0-4.11,3.44,1.53,7.79C112.45,177.64,122,169.23,129.37,170.85Z" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M169,174s10.87,0,15.75,5.3c0,0,7.17-3.35-.72-7.17a4.59,4.59,0,0,1,3.9.43s.17-5.21-8-4.78a6.57,6.57,0,0,1,5.35-.31s-7.17-7.69-12.4-.67a5.83,5.83,0,0,1,3.27-4c-2.6-.17-11.28-.72-10.49,10.82Z" transform="translate(-6.52 -22.25)"/><path class="cls-4" d="M208.94,196.28,206.38,199c.76-2.39,2.56-24.78,0-21.94s-5.19,3.78-5.3,3.25-4.92-35.51-7.74-23c-1.51,6.67-4.9,10.94-6.64,9.56-8-25.81-33.1-29.25-33.74-26.29-1.15,5.14,10.2,11.06,11.23,11.95-4.64,6.93-35.41-9.56-35.41-9.56-9.68,4.13-9.37,21.27-9.92,21.22-2.87-.29-6.5-6.36-6.5-6.36-8.29-.38-10.28,33.43-10.28,33.43-7.17-10.92-21.24,4-26,7.91s1.82-11.33,7.77-13.53c0,0-13.57-.53-15.82,9a18.71,18.71,0,0,1,6.52-17.11S60.71,188.9,57.65,193.63c.45-3.06,1.19-6.62,1.19-6.62l-10.39,1.53S45.68,162,63.84,157.16s-1.17-2.39-1.17-2.39-5.5-9.56-21.51-5.62c0,0,6.93-55,40.12-59.12,0,0-3.15-11.95-14.72-9.56,0,0,1.72-6.14,6.67-6L64,69.61s28.53-16.42,51.62,8.67c0,0,8.2-36.73,8.08-41.63s.29-10-1.46-12.9c0,0,11,2,11.11,7.17a5.62,5.62,0,0,0-1.82-6.71s18.93,7.67,17.28,16.73l1.39-7.67s5.76,2.94,6.14,6.5,1.46-8.05,1.46-8.05,18.95,7.17,20,35.25c0,0,49.32-18.5,65.57,31.47L230.9,96s9.56,4,11,10.32c0,0,15.22,4.09,15.22,41.67,0,0-3.73-15.56-15.08-17.42,0,0,16.73,7.17,17.64,42.25a40.62,40.62,0,0,0-11.61-7.17s12.26,7.77,7.89,27.62c0,0-2.13-5-11.57-6l1.34,3.78-7.48-3.75S215.18,189,208.94,196.28Z" transform="translate(-6.52 -22.25)"/><path class="cls-4" d="M137.92,197.69c-6.88-5.33-27.65-9.41-25,24.21,0,0,1.41-5.28,4.78-5,0,0-1.41,8.27,2.92,10,0,0,2.08-8.24,5.4-6.4,0,0,6.19,10.13,11.64,10.85,0,0-1.41-7.17,2.17-7.17l5.47,8.24,5.35-9.3s3.8,4.28,1.36,6.14a6,6,0,0,0,6.12-5.42s6.24,2.22,5.09,7.81a9.94,9.94,0,0,0,4.56-9.1l5.23,6.83,1.48-11.09s8.67,3.32,8.77,7.17a17.13,17.13,0,0,0-4.78-16.08l8.7,1.55s-19.12-22.13-34.86-10.37C149.87,202.21,146.83,204.67,137.92,197.69Z" transform="translate(-6.52 -22.25)"/><path class="cls-2" d="M81.93,258.43c-6.6-2.7-12.28-8.1-13-9.82a9,9,0,0,1-1-3.87,4.06,4.06,0,0,1,.36-2.1,1.46,1.46,0,0,0-.6-1.89,3.32,3.32,0,0,1-1.7-2.82v-3.58a2.68,2.68,0,0,1,1.43-2.58,1,1,0,0,0,.25-1.4l-.09-.11a3.3,3.3,0,0,1-.84-3.06l.74-3.25c.53-1.62,2.87-1.89,4.37-1.77a3.92,3.92,0,0,1,.22-.45c1.1-1.89-9.1-9.27-8.39-15.37.67-5.62,7.74-.22,10.94,2.39,4.78,3.87,7.17,6.36,9.56,8.44,1.36,1.15,7.17-4.11,14.58,6.17a43.92,43.92,0,0,1,6.19,9.56,30,30,0,0,1-18,25.57Z" transform="translate(-6.52 -22.25)"/><path class="cls-2" d="M76.32,222.35a1.72,1.72,0,0,1,.14-1.46c.65-.81,2.65-1.82,8-3.51-2.39-2.13-5-4.78-9.85-8.67-3.2-2.58-10.3-8-10.94-2.39-.72,6.07,9.56,13.48,8.39,15.37a3.92,3.92,0,0,0-.22.45" transform="translate(-6.52 -22.25)"/><path class="cls-1" d="M76.22,221.47a7.77,7.77,0,0,0,4.56,7.17,11,11,0,0,0,8,.24" transform="translate(-6.52 -22.25)"/><path class="cls-3" d="M187.41,275.42c-3.18.72-6.64-6.24-6.64-6.24l9.2-3.9S190.49,274.66,187.41,275.42Z" transform="translate(-6.52 -22.25)"/></svg>

Expected behavior

Colors are lost (and any other style).

Link to repl or repo (highly encouraged)

Copy the SVG and paste it into the playground, make sure to export to react-native.
https://www.smooth-code.com/open-source/svgr/playground/

[gregberge]

Hello @7ynk3r, I thought SVGO was doing something like that but probably not completely.

We will not work on a script to inline style converter in svgr. But since it is based on Babel, you can try to create your own plugin to do it.

Right now I don’t have any solution for you, except the write of a new Babel plugin.

See https://www.smooth-code.com/open-source/svgr/docs/custom-transformations/ for more information.

[7ynk3r]

If anyone reach this place, there's a simple solution to this problem.

You have to optimize your svg files using https://github.com/svg/svgo and the following config file

{
  "plugins": [
    {
      "inlineStyles": {
        "onlyMatchedOnce": false
      }
    }
  ]
}

This will convert styles into inline attributes.

[gregberge]

@7ynk3r since svgr is using svgo under the hood, it should work if you specify this config in your .svgrrc or in your .svgo.yml.

[7ynk3r]

Thanks for the insight @neoziro !

Use .svgrrc with the following content

{
  "svgoConfig": {
    "plugins": [
      {
        "inlineStyles": {
          "onlyMatchedOnce": false
        }
      }
    ]
  }
}