如何在反应中为我的svg图像添加颜色

Question

我有一个图标列表。我想将图标颜色更改为白色。默认情况下，我的图标是黑色的。有什么建议吗？

我通常在CSS中使用'fill: white'，但现在我正在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

将您的svg用作组件，然后可以访问所有svg优点：

Answer 2

如果使用create-react-app，则可以如下使用

Answer 3

我的建议是使用SVG之类的工具进行字体转换，icomoon是我的最爱，创建自己的自定义字体库以导入SVG图标