title: How do you render a different SVG onhover using react
body: <p>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. </p>
  
  <p>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:</p>
  
  <pre><code>.cancelBlack:hover{
      display:none;
  }
  .cancelBlue{
      display: none;
  }
  .cancelBlue:hover{
      display:flex;
  }
  //heres how im calling it in react
  &lt;button type="button" className='cancelBlack'&gt;
      &lt;ReactSVG src={Cancel} /&gt;
  &lt;/button&gt;
  &lt;button type="button" className='cancelBlue'&gt;
      &lt;ReactSVG src={CancelBlue} /&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Here's the source code for the SVG:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
      &lt;!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
      &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
      &lt;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"&gt;
      &lt;g&gt;
  
              &lt;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    "/&gt;
  
              &lt;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  "/&gt;
      &lt;/g&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p>I wasn't sure how to undo the display none so I just went with display:flex. Thanks for any help.</p>