如何在反应中更改svg图标颜色答案

【问题标题】：How to change svg icon color in react如何在反应中更改svg图标颜色
【发布时间】：2020-11-21 07:13:22
【问题描述】：

我有一个部分我想点击更改 SVG 颜色的颜色，

这是我目前的解决方案

<div className={`download-options ${tab ==='downloadoptions' && 'active-tab'}`}>
                        <span style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className="download_icon" onClick={handleDownloadTabClick}>
                            <img src={downloadSVG} style={{ fill: isBlack ? '#fff' : '#262626'}} />
                        </span>
                        <span className="download_title media-text">DOWNLOAD</span>
                    </div>

不幸的是，这并没有改变 icon 的颜色，我在这里做错了什么？

【问题讨论】：

标签： javascript html css reactjs svg

【解决方案1】：

您将fill 属性添加到img 标记，因此对SVG 没有影响。

正确的方法是将 SVG 作为 React 组件导入。如果您使用的是 create-react-app，则加载程序已配置为执行此操作。你会这样做：

// app.js
import React from 'react';
import { ReactComponent as DownloadSVG } from '../assets/svg/download.svg';

const App = ({ isBlack }) => (
  <DownloadSVG style={{ fill: isBlack ? '#fff' : '#262626'}} />
)

【讨论】：

React.createElement: type is invalid -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
谢谢，但是我们如何改变 isBlack 的值呢？
@lifelonglearner，我不确定我是否理解你。你能详细说明一下吗？

【解决方案2】：

使用你的 svg 作为组件

const DownloadIcon = (props) =>(
            <svg xmlns="http://path/to/svg" fill={props.fill} className={props.class}></svg>
            )

在渲染中：

<span>
   <a href="/" className="download_icon">
    <DownloadIcon fill="white"/>
   </a>
  </span>

【讨论】：