title: how to change color of a svg source in a img tag?
body: <p>I am trying to change the color of an svg icon from black to white when a color prop is provided.</p>
  
  <pre><code>export class CategoryIconComponent extends React.Component {
  
  
  static displayName = 'CategoryIcon';
  
    state = { icon: null };
  
    static propTypes = {
      title: PropTypes.string,
      color: PropTypes.string,
    };
  
    static defaultProps = {
      title: null,
      color: '#fff',
    };
  
    componentDidMount() {
      const { title } = this.props;
  
      if (getTopCategoryIcon('Concrete Contractors') != null){
  
      if(typeof getTopCategoryIcon('Concrete Contractors') === 'string'){
        this.setState({ icon: getTopCategoryIcon('Concrete Contractors') });
      }
  
     else{
        getTopCategoryIcon(title).then((newIcon) =&gt; {
          this.setState({ icon: newIcon });
        });
      }
    }
  }
  
    render() {
      const { icon } = this.state;
      const { color } = this.props;
  
      return (
        icon &amp;&amp; (
          &lt;TextIconContainer&gt;
  
             // I want to be able to change color of the icon from black to white via color prop here
             // something like
            &lt;img src={icon} width={25} height={25} color={color} /&gt;
          &lt;/TextIconContainer&gt;
        )
      );
    }
  </code></pre>
  
  <p>Is there a css way to do it? or any other way I can tap into the svg component and change it?</p>
  
  <p><a href="https://i.stack.imgur.com/DgWTp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DgWTp.jpg" alt="enter image description here"></a></p>