title: scale and change the color of a svg on hover in React
body: <p>I have the following custom Icon component:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  const Icon = (props: any) =&gt; {
    const styles = {
      svg: {
        display: 'inline-block',
        verticalAlign: 'middle',
      },
      path: {
         fill: props.color,
      },
    };
  
    return (
  
      &lt;svg
  
        style={styles.svg}
        width={`${props.size}px`}
        height={`${props.size}px`}
        viewBox="0 0 1024 1024"
      &gt;
         &lt;path style={styles.path} d={props.icon} /&gt; 
      &lt;/svg&gt;
    );
  
  
  };
  
  Icon.propTypes = {
    icon: PropTypes.string.isRequired,
    size: PropTypes.number,
    color: PropTypes.string
  
  };
  
  Icon.defaultProps = {
    size: 16
  };
  
  export default Icon
  </code></pre>
  
  <p>In another component I instantiate it with the following statement:</p>
  
  <pre><code>&lt;Icon
            icon={ICONS.TWITTER}
            color="#fff"
            size={30}
          /&gt;
  </code></pre>
  
  <p>How can I change the size and color on hover?
  Thanks in advance!</p>