svgr transforms svgs oddly

[lifeiscontent]

given this SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60">
  <defs>
    <path id="a-to-z-a" d="M20.588,26 L19.1,22.424 L11.9,22.424 L10.412,26 L7.892,26 L15.308,8.96 L15.644,8.96 L23.084,26 L20.588,26 Z M12.812,20.216 L18.188,20.216 L15.5,13.736 L12.812,20.216 Z M47.744,34.2 L47.744,34.488 L40.64,48.792 L47.504,48.792 L47.504,51 L37.256,51 L37.256,50.664 L44.408,36.408 L37.352,36.408 L37.352,34.2 L47.744,34.2 Z M27,18.2532924 C27,18.1134029 27.1139402,18 27.2557783,18 L29.7442217,18 C29.8854841,18 30,18.1070023 30,18.2532924 L30,41.7467076 C30,41.8865971 29.8860598,42 29.7442217,42 L27.2557783,42 C27.1145159,42 27,41.8929977 27,41.7467076 L27,18.2532924 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="a-to-z-b" fill="#fff">
      <use xlink:href="#a-to-z-a"/>
    </mask>
  </g>
</svg>

I'd expect the output to look something like this

import React from "react";

const AToZ = props => (
  <svg width={60} height={60} viewBox="0 0 60 60" {...props}>
      <path
        d="M20.588 26L19.1 22.424h-7.2L10.412 26h-2.52l7.416-17.04h.336L23.084 26h-2.496zm-7.776-5.784h5.376l-2.688-6.48-2.688 6.48zM47.744 34.2v.288L40.64 48.792h6.864V51H37.256v-.336l7.152-14.256h-7.056V34.2h10.392zM27 18.253c0-.14.114-.253.256-.253h2.488a.25.25 0 0 1 .256.253v23.494c0 .14-.114.253-.256.253h-2.488a.25.25 0 0 1-.256-.253V18.253z"
      />
  </svg>
);

export default AToZ;

the result looks like this

import React from "react";

const AToZ = props => (
  <svg width={60} height={60} viewBox="0 0 60 60" {...props}>
    <defs>
      <path
        id="a"
        d="M20.588 26L19.1 22.424h-7.2L10.412 26h-2.52l7.416-17.04h.336L23.084 26h-2.496zm-7.776-5.784h5.376l-2.688-6.48-2.688 6.48zM47.744 34.2v.288L40.64 48.792h6.864V51H37.256v-.336l7.152-14.256h-7.056V34.2h10.392zM27 18.253c0-.14.114-.253.256-.253h2.488a.25.25 0 0 1 .256.253v23.494c0 .14-.114.253-.256.253h-2.488a.25.25 0 0 1-.256-.253V18.253z"
      />
    </defs>
  </svg>
);

export default AToZ;

[gregberge]

What is the problem?

[lifeiscontent]

Nvm, I found a work around to my problem.

[sm3sher]

Could u describe your workaround? I am running into the same problem.

[lifeiscontent]

@sm3sher take the SVG into Figma, flatten/outline stroke the SVG, and use the simplified SVG from that, if it has even-odd fill paths use fill rule editor plugin