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

Question

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

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

我使用这种方法来避免为每个图标创建React组件的需要。正如文档所说，您可以将SVG文件作为react组件导入。

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

如果要更改fill属性，必须将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>
);