title: React changing react-icon color on mouse hover
body: <p>I want to change the color of react-icons when I hover over them with my mouse. With the code given below the icon only changes color when the mouse is hovering on the icon's lines. For instance with a mail icon the color only changes when the cursor hovers over the lines of the icon and not the empty spaces. How would I get the icon to change color if I hover over any part of it?</p>
  <pre><code>&lt;AiOutlineMail size=&quot;80px&quot;
      onMouseOver={({target})=&gt;target.style.color=&quot;white&quot;}
      onMouseOut={({target})=&gt;target.style.color=&quot;black&quot;}
  /&gt;
  </code></pre>