I have a section I would like on click to change the color of SVG color,

Here is my solution so far

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

Unfortunatelly this is not changing the color of icon , what am I doing wrong here?

I have a section I would like on click to change the color of SVG color,

Here is my solution so far

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

Unfortunatelly this is not changing the color of icon , what am I doing wrong here?

• javascript
• html
• css
• reactjs
• svg

3 Answers 3

You're adding fill property to the img tag, hence having no effect on the SVG.

The correct way is to import the SVG as a React Component. If you are using create-react-app, the loader is configured to do that. You would do this:

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

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

You need to add fill=current to the path tag in your svg file before passing any fill value to the SVG React ponent.

So, your ponent should be something like this

import { ReactComponent as YourIcon } from 'assets/icons/yourIcon.svg';

const SVGIcon = ({ fill }) => (
  <YourIcon fill={fill} />
)

And the svg file. Please note fill="current" in both path tags. That makes the magic happen

<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd"
    d="M12.5 3.45616C7.6801 3.45616 3.77277 7.36349 3.77277 12.1834C3.77277 17.0034 7.6801 20.9107 12.5 20.9107C17.32 20.9107 21.2273 17.0034 21.2273 12.1834C21.2273 7.36349 17.32 3.45616 12.5 3.45616ZM1.83337 12.1834C1.83337 6.29239 6.609 1.51676 12.5 1.51676C18.3911 1.51676 23.1667 6.29239 23.1667 12.1834C23.1667 18.0745 18.3911 22.8501 12.5 22.8501C6.609 22.8501 1.83337 18.0745 1.83337 12.1834Z"
    fill="current" />
  <path d="M8.5 6.8501H16.5V8.35867H10.97V11.4215H15.9839V12.9149H10.97V17.5168H8.5V6.8501Z"
    fill="current" />
</svg>

use your svg as a ponent

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

in render:

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