如何在 React 中为 svg 图像添加颜色

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

我通常使用'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;
}

我使用这种方法来避免为每个图标创建 React 组件的需要。作为docs https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs假设您可以将 SVG 文件作为 React 组件导入。

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

如果你想改变填充属性你必须设置你的SVGfill的值到current然后你可以像这样使用它：

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