CODEWITHSUNDEEP
javascripthtmlcssreactjssvg
The Dead Man
The Dead Man

Reputation: 5576

How to change svg icon color in react

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?

Upvotes: 0

Views: 11510

Answers (3)

Mati Cassanelli
Mati Cassanelli

Reputation: 743

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

So, your component 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.org/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>

Upvotes: 3

kingkong.js
kingkong.js

Reputation: 751

use your svg as a component

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>

Upvotes: 0

Adam Azad
Adam Azad

Reputation: 11297

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

Upvotes: 3

Related Questions