Closed
Description
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?
Metadata
Metadata
Assignees
Labels
No labels