title: onClick event handler not work as expected when attached to SVG Icon in React
body: <p>I use SVG Icons as React components in my current project and faced with next problem:</p>
  <p>When I click on icon, that has attached onClick event handler - sometimes handler works, sometimes not.
  I observed, that this depends where mouse pointer currently placed - if it placed <strong>on svg element</strong> to which
  handler attached - it works, otherwise - if mouse pointer placed on <strong>svg child path  element</strong> - handler not works.</p>
  <p>This is example of my Icon Component:</p>
  <pre class="lang-js prettyprint-override"><code>
  import React from 'react';
  
  const IconTrash = ({ onClick, style, ...rest }) =&gt; {
      return (
          &lt;svg width=&quot;1em&quot; height=&quot;1em&quot; viewBox=&quot;0 0 16 16&quot; className=&quot;bi bi-trash&quot; fill=&quot;currentColor&quot;
               xmlns=&quot;http://www.w3.org/2000/svg&quot;
               onClick={onClick}
               style={{ ...style, cursor: 'pointer'}}
               {...rest}
          &gt;
              &lt;path
                  d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z&quot;/&gt;
              &lt;path fillRule=&quot;evenodd&quot;
                    d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z&quot;/&gt;
          &lt;/svg&gt;
      );
  };
  
  export default IconTrash;
  
  </code></pre>
  <p>As temporary solution I decided attach <strong>onClick handler</strong> to all elements, but I think this is not good.</p>
  <p>So, how to call handler, independently where mouse pointer appeared on svg or on it child?</p>