Create-react-app: SVG repeated (cached?) when imported and passed as a prop to another component

[nerfologist]

Is this a bug report?

Yes

Did you try recovering your dependencies?

The problem happens in a brand new demo project started with create-react-app.

Which terms did you search for in User Guide?

SVG, svg import

Environment

Pasting the result of npx create-react-app --info but my test case is on CodeSandbox anyway:

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
  Binaries:
    Node: 11.6.0 - ~/.nvs/default/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.5.0-next.0 - ~/.nvs/default/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0.2
  npmPackages:
    react: ^16.7.0 => 16.7.0
    react-dom: ^16.7.0 => 16.7.0
    react-scripts: 2.1.3 => 2.1.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

TLDR: CodeSandbox: https://codesandbox.io/s/o45v70nv15

• start a new project with create-react-app
• import two different SVG images as React components into the index.js
• create a component able to accept another React component as a property (in my case, I created a Button component which accepts an icon; icon is meant to be a component).
• create two Buttons, each receiving a different SVG image component as icon

import { ReactComponent as Search } from "./search.svg";
import { ReactComponent as Cross } from "./cross.svg";
import Button from "./Button";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Weird problem with SVG imports</h1>
      <p>
        The following buttons should have different icons, <br />
        the first should be a magnifying glass and the second should be a cross.
      </p>
      <Button icon={Search}>Magnifying glass</Button>
      <Button icon={Cross}>Cross</Button>
      <p>Unfortunately, both buttons seem to display a magnifying glass</p>
    </div>
  );
}

Expected Behavior

The two button should render with different images

Actual Behavior

The two button both display the first rendered SVG image

Reproducible Demo

https://codesandbox.io/s/o45v70nv15

Notes

Is this a bug or am I doing something wrong?

[nikolasveneti]

Hey buddy,
The SVG's are very badly made and exported, if you tried any other SVG you would see that it works perfectly.
Why?

Explanation

Simple.
If you open the svg in a editor you will see that their id's and mask url's are identical.
If you still wanna use these, you can get them here, I fixed them for you.
Have fun and good luck with your project!

[nerfologist]

@Malldoror thank you so much for your detailed explanation and for your help! I am not an SVG expert, didn't make them myself and I assumed they were OK 😊 .

[nikolasveneti]

I'm always learning too my friend, that's why I love solving issues :)

Have fun!