How do I add color to my svg image in react

Question

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; } 

Answer 1

I use this approach to avoid the need of creating a React component for each icon. As the docs say you can import the SVG file as a react component.

import { ReactComponent as Logo } from './logo.svg'; const App = () => (   <div>     {/* Logo is an actual React component */}     <Logo />   </div> ); 

If you want to change the fill property you have to set your SVG fill's value to current then you can use it like this:

<svg fill="current" stroke="current" ....> ... </svg> 

import { ReactComponent as Logo } from './logo.svg'; const App = () => (   <div>     {/* Logo is an actual React component */}     <Logo fill='red' stroke='green'/>   </div> ); 

Answer 2

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>