SVG in JSX - how to convert defs tag

Question

I have some SVGs that have a defs attribute with a style tags inside. Like this:

<svg ...>
  <defs>
    <style>.cls-1,.cls-7{fill:#b2488d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#671f4d;}</style>
  </defs>
  ...
</svg>

I want to use these SVGs in React, so I want to convert them to valid JSX. I already used tools like svg2jsx, but they strip the defs tag away so none of the style attributes are present anymore. Is there a way to preserve the defs with the style tag inside by converting the SVG in JSX? Or is it not possible to use css classes in this case?

Answer 1

You can preserve the styles without any conversion. For that wrap all the CSS classes inside the style tag with {` and `}. Now your SVG becomes like this

<svg ...>
  <defs>
    <style>{`.cls-1,.cls-7{fill:#b2488d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#671f4d;}`}</style>
  </defs>
  ...
</svg>

This will render without any problem.