Question

我想单击一个部分来更改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>

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

Answer 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'}} />
)

Answer 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>

如何在React中更改SVG图标颜色

2 个答案: