如何在反应中为我的 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;
}

原文由 Deejay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用你的 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>

原文由 Fpunkt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我使用这种方法来避免为每个图标创建一个 React 组件的需要。正如 文档 所说，您可以将 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>
);

原文由 Nasser Abachi 发布，翻译遵循 CC BY-SA 4.0 许可协议