title: React Icon Click event
body: <p>I'm using npm react-icons on some buttons. </p>
  
  <p>Unfortunately, the icon stops the onClick attribute from working. If you click the button in the corner, outside the icon, it works fine. </p>
  
  <p>I was wondering if there is a simple solution that does not involve passing down the onClick function as a prop and going into the react-icons code and adding the onClick to it.</p>
  
  <p>the code in the module is </p>
  
  <pre><code>    import React from 'react'
      import Icon from 'react-icon-base'
  
      const FaArrowUp = props =&gt; (
          &lt;Icon viewBox="0 0 40 40" {...props}&gt;
              &lt;g&gt;&lt;path d="m37.5 21.7q0 1.1-0.9 2l-1.6 1.7q-0.9 0.8-2.1 0.8-1.2 0-2-0.8l-6.5-6.6v15.7q0 1.2-0.9 1.9t-2 0.7h-2.9q-1.1 0-2-0.7t-0.8-1.9v-15.7l-6.6 6.6q-0.8 0.8-2 0.8t-2-0.8l-1.7-1.7q-0.8-0.9-0.8-2 0-1.2 0.8-2.1l14.6-14.5q0.7-0.8 2-0.8 1.2 0 2 0.8l14.5 14.5q0.9 0.9 0.9 2.1z"/&gt;&lt;/g&gt;
          &lt;/Icon&gt;
      )
  
      export default FaArrowUp
  </code></pre>
  
  <p>my render method where I import the icon has</p>
  
  <pre><code> &lt;button name='up' onClick={this.move}&gt; &lt;FaArrowUp /&gt; &lt;/button&gt;
  </code></pre>