How do you render a different SVG onhover using react - css

Question

I am trying to render a different color of the SVG I have on hover but I cant figure out the best way to do it.
When I looked up this question it tells me to use fill:{color} but I couldn't get that to work. I have tried creating two different SVG's one of the color I want normally(cancelBlack) and one of the color I want on hover(cancelBlue). I then tried doing this:
.cancelBlack:hover{
display:none;
}
.cancelBlue{
display: none;
}
.cancelBlue:hover{
display:flex;
}
//heres how im calling it in react
<button type="button" className='cancelBlack'>
<ReactSVG src={Cancel} />
</button>
<button type="button" className='cancelBlue'>
<ReactSVG src={CancelBlue} />
</button>
Here's the source code for the SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<polyline fill="none" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
17.686,6.303 12,11.986 17.712,17.697 "/>
<polyline fill="none" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
6.316,6.303 12,11.986 6.289,17.697 "/>
</g>
</svg>
I wasn't sure how to undo the display none so I just went with display:flex. Thanks for any help.

Answer 1

You can use opacity or fill-opacity instead of display attr.
.cancelHover {
position: absolute;
z-index: 0;
}
.cancelNormal {
opacity: 1;
z-index: 1;
}
.cancelNormal:hover{
opacity: 0;
}
...
<button type="button" className='cancelHover'>
<ReactSVG src={CancelHover} />
</button>
<button type="button" className='cancelNormal'>
<ReactSVG src={CancelNormal} />
</button>
Another option:
You need to remove fill and stroke attrs in your svg files.
They are inline styles so you can't change it in your css style.
According to your svg files, it uses strokes so you need to change stroke colors in css.
.cancelNormal {
stroke: #4D4D4D;
z-index: 1;
}
.cancelNormal:hover{
stroke: #0000;
opacity: 0;
}
And also you can hide your svg image by using stroke-width: 0.

Answer 2

You probably need to do something like this:
Your CSS is targeting the SVG itself instead of the elements that make up the SVG.
.cancelBlue:hover { fill: #{color} }