javascriptreactjssvgwebpacksvg-react-loader

React SVGR renders svg incorrectly

I'm trying to render 2 SVG files on my react app.

Here:

SVG File correct

But when importing it as a component to React:

import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";

const Envelope = ({closed) => {
  return (
    <div>
      {closed ? <ClosedEnvelope /> : <OpenEnvelope />}      
    </div>
  );
};

It renders the SVG incorrectly:

corrupt svg render

As you can see the "arrow" on the bottom left side is overflowing.

Seems like an issue with the method I used, because loading the SVG as an image, does work.

What may the problem be? Thanks in advance

Here are the links to the SVG files: Close envelope Github Open envelope Github

Solution

  • Well, Apparently the 2 SVG files, had the same classes and IDs, which caused them to change a little.

    If you have the same issue,

    1. Change all the classes in one SVG file.
    2. Change all IDs, also in the CSS like clip-path: URL(#SOME_ID)

    This worked for me.