How do I add color to my svg image in react

Issue

I have a list of icons. I want to change the icons colors to white. By default my icons are black. Any suggestions guys?

I normally use 'fill: white' in my css but now that I am doing this in React... it's not working!

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}

Solution

use your SVG as a component, then all the SVG goodness is accessible:

const MenuIcon = (props) =>(
    <svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
)

And in your render

<li>
   <a href="/" className="sidebar__link">
      <MenuIcon fill="white"/>
    </a>
</li>

Answered By - Fpunkt