I have a svg react component with linearGradient that I render in my Header component and my main component. When I set display: none style to the Header component, I expect the svg in the Header component to be hidden and the svg in the main component to be visible. When I use svg without linearGradient, I get the expected behavior of svg hidden in Header and visible in main component. However, if the svg uses linearGradient, then setting display: none to the Header hides the svg in the Header and the main component.
To reproduce the issue, I have 2 react components PythonIcon (using linearGradient) and WebpackIcon (not using linearGradient). In my App.js, I render the Header and also render both PythonIcon and WebpackIcon in my main component:
import React from "react";
import Header from "./Header";
import PythonIcon from "./PythonIcon";
import WebpackIcon from "./WebpackIcon";
function App() {
return (
<div>
<Header />
<main style={{ marginTop: "1rem", border: "1px solid green" }}>
<h1>
<PythonIcon width="20" height="20" />
Python
</h1>
<h1>
<WebpackIcon width="20" height="20" />
Webpack
</h1>
</main>
</div>
);
}
export default App;
In my Header component, I also render PythonIcon and WebpackIcon
import React from "react";
import PythonIcon from "./PythonIcon";
import WebpackIcon from "./WebpackIcon";
export default function Header() {
return (
<header style={{ border: "1px solid red", display: "block" }}>
<h1>
<PythonIcon width="20" height="20" />
Python
</h1>
<h1>
<WebpackIcon width="20" height="20" />
Webpack
</h1>
</header>
);
}
And the page looks like this:
But once I change display: block to display: none in the Header component, the page looks like this:
Notice that the webpack icon (which doesn't use linearGradient) is correctly showing in main component, but the python icon (which uses linearGradient) is not.
This was unexpected. Am I doing something wrong? Is there any way to hide the python icon in the header without having it hide the python icon in the main component? I am trying to create a responsive navbar using css media-query to show/hide navbar. Unfortunately, hiding the navbar w/ svg icons also hides the svg icon in my other components that I render.
I've provided a minimal reproduction at https://github.com/kimbaudi/react-svg-lineargradient-issue
left– enxaneta