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

Question

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

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

Answer 1

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

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

Answer 2

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

Answer 3

您可以通过访问g或path来更改 svg 的 css 。从 create-react-app 2.0 版开始

import React from 'react'
import {ReactComponent as Icon} from './home.svg';

export const Home = () => {

    return (
        <div className='home'>
            <Icon className='home__icon'/>
        </div>
    );
};

.home__icon g {
 fill: #FFFFF;
}
.home__icon path {
 stroke: #e5e5e5;
 stroke-width: 10px;
}

Answer 4

我发现了这个问题的一个有趣的解决方案。不知道它是否适用于所有情况...好吧，我有一个像这样导入的 svg：

import LockIcon from "../assets/lock.svg"

然后将其渲染为：

<LockIcon color={theme.colors.text.primary} />

然后在 lock.svg 中我只需添加fill="currentColor"svg 标签。

希望这对你们中的一些人有用。

Answer 5

如果您想更改 svg 的颜色而不更改 svg 的样式或不对 svg 本身的代码进行任何更改。

您也可以更改 svg 作为图像的颜色。

这可以通过应用 css 的过滤器属性来完成。 将颜色更改为 css filter。

对于蓝色

• 十六进制代码 = #0000ff
• 蓝色过滤器：invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%);

代码

<img src="path/to/svg" 
  style={{filter: "invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%)"}} 
/>

参考

Answer 6

就我而言，我需要删除 svg 文件的这一部分才能使其正常工作：

<style type="text/css">
    .st0{fill:#8AC6F4;}
</style>

那么这有效

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

Answer 7

如果您正在使用，create-react-app 您可以使用如下

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

最重要的部分不要忘记将它们作为 ReactComponent as Logo

创建 React 应用程序文档