Как мне добавить цвет к моему изображению SVG в реакции

Question

У меня есть список значков.Я хочу изменить цвет значков на белый.По умолчанию мои иконки черные.Любые предложения, ребята?

Я обычно использую 'fill: white' в моем css, но теперь, когда я делаю это в React ... это не работает!

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

Если вы используете create-react-app, вы можете использовать, как показано ниже

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

самая важная часть, не забывая импортировать их как ReactComponent as Logo

Создать документацию приложения React

Answer 2

используйте ваш svg в качестве компонента, тогда все достоинства svg доступны:

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

и в вашем рендере

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