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

【问题标题】：How do I add color to my svg image in react如何在反应中为我的 svg 图像添加颜色
【发布时间】：2019-06-28 09:37:23
【问题描述】：

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

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

【问题讨论】：

您是否尝试使用样式属性？ <img src={homeIcon} style={{fill:"#FFFFFF"}} alt="sidebar icon" className="sidebar__icon" />
不，我没有使用...我正在使用 sass inn 一个外部文件
无论如何你都可以使用在线样式属性

标签： html reactjs css

【解决方案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>

【讨论】：

谢谢，但我必须为我的所有图标创建组件吗？我有大约 5 个图标要包括在内。
这就是操作 SVG DOM 的方法，是的。唯一的其他选择是在上使用 css 过滤器
无论如何，如果您将此问题标记为已回答，这将是您的好意，并且可能对其他有相同问题的人有所帮助。
嘿比比...我工作了，我是新来的反应所以花了一段时间才得到它...再次感谢！
您可以使用smooth-code.com/open-source/svgr 等工具从 SVG 文件自动创建 React 组件。

【解决方案2】：

如果你使用create-react-app，你可以使用如下

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

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

Create React app documentation

【讨论】：

组件是否获得道具？喜欢fill 颜色？
@user2078023 如果你想在 svg 上添加道具，你需要创建一个组件并在那里作为道具传递。
@user2078023 是的，但不要忘记在 svg 文件中设置 currentColor，如
@user2078023 答案是肯定的，但请确保您的 SVG 标签已使用默认填充道具处理颜色。如果颜色是 svg 中任何内部元素的句柄，那么就没有用了。
这个例子没有展示如何给 SVG 添加颜色，只展示了如何将它作为 React 组件导入

【解决方案3】：

我的建议是使用像 SVG 到字体转换器这样的工具，icomoon 是我的最爱，创建您自己的自定义字体库来导入您的 SVG 图标

道具

使用 CSS 更改图标的颜色、字体大小等
通过一次导入在整个项目中使用
他们提供了一些免费的图标/图标包

缺点

初始学习曲线
在创建 SVG 图标时正确遵循尺寸、轮廓等
难以处理多色图标

【讨论】：

最终，但最大的缺点是可访问性 - 这种方法会删除 svg 中可读的所有文本（工具提示、描述和标题），因此对于有可访问性挑战的用户来说，它在阅读器中毫无用处。
感谢您的指点，我总是尝试在需要时保留自定义标题。

【解决方案4】：

您可以通过访问 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;
}

【讨论】：

【解决方案5】：

就我而言，我需要删除我的 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>
);

【讨论】：

【解决方案6】：

从 React 16.13.1 开始，您可以直接将 SVG 用作组件并传递 fill 属性来更改颜色。请看下面的例子：

home.svg

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"/></svg>

ShowIcon/index.js

import React from 'react';

import HomeIcon from './home.svg';

const ShowIcon = props => {
    return (
        <HomeIcon fill='#ccc' />
    )
}

export default ShowIcon;

但是，在使用几个图标进行测试后，我注意到它不适用于所有图标。所以，请在使用前进行测试。

【讨论】：

【解决方案7】：

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

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

【讨论】：

这是2020年的正确答案。如果你在svg中使用fill="currentColor" stroke="currentColor"，那么你可以在组件上做style={{ textColor: 'blue' }}之类的事情。
如果内联颜色应该应用于<path>，在<svg> 内，也可以使用。而不是把fill='current'放在<svg>标签上，把它放在里面的<path>标签上。 <svg> <path fill='current'></path></ svg>
也许这很明显，但是当我使用我在 inkscape 中制作的 svg 执行此操作时，在 svg 底部还有一个样式标签，其 fill=#000000 覆盖了我的颜色偏好。我删除了那行，它起作用了。如果您正在执行此方法并且它仍然没有更新或只有笔画正在更新，那么这可能值得考虑。

【解决方案8】：

如果你想改变svg的颜色而不改变svg的样式或者不改变svg本身的代码。

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

这可以通过应用 css 的 filter 属性来完成。 Change your color to 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%)"}} 
/>

Reference

【讨论】：

【解决方案9】：

我遇到了同样的问题，尝试了大部分建议都没有成功。

我用一种非常简单的方式解决了...无需为 SVG 图像创建组件

>>> .svg 文件中只添加想要的颜色作为填充<path fill='#9d8189' ...></path>

【讨论】：

【解决方案10】：

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

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

然后将其渲染为：

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

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

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

【讨论】：