html - 如何在 React 中为 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

我使用这种方法来避免为每个图标创建一个 React 组件的需要。作为docs假设您可以将 SVG 文件作为 React 组件导入。

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

如果您想更改填充属性，则必须将 SVG fill 的值设置为 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>
);