如何在反應中更改 svg 圖標顏色

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

您正在向img標簽添加fill屬性，因此對 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>