Skip to content

SVG repeated (cached?) when imported and passed as a prop to another component #6176

Closed
@nerfologist

Description

@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

screen shot 2019-01-11 at 16 19 32

Reproducible Demo

https://codesandbox.io/s/o45v70nv15

Notes

Is this a bug or am I doing something wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions