How do I add color to my svg image in react

Question

I have a list of icons. I want to change the icons colors to white. By default my icons are black. Any suggestions guys?

I normally use 'fill: white' in my css but now that I am doing this in React... it's not working!

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}

Did you try to use the style attribute ? `` – Alexis Feb 04 '19 at 15:51 — Alexis, Feb 04 '19 at 15:51
No i did not use...I am using sass inn an external file – Deejay Feb 04 '19 at 19:17 — Deejay, Feb 04 '19 at 19:17
Anyway you can use online style attribute – Alexis Feb 05 '19 at 12:35 — Alexis, Feb 05 '19 at 12:35

score 108 · Answer 1 · edited Nov 04 '21 at 18:52

108

I use this approach to avoid the need of creating a React component for each icon. As the docs say you can import the SVG file as a react component.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

If you want to change the fill property you have to set your SVG fill's value to current then you can use it like this:

<svg fill="current" stroke="current" ....> ... </svg>

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);

edited Nov 04 '21 at 18:52

smac89

39,374
15
132
179

answered Jun 23 '20 at 10:03

Nasser Abachi

1,308
1
9
12

16

This is the correct answer in 2020. If you use `fill="currentColor" stroke="currentColor"` in the svg, then you can do things like `style={{ textColor: 'blue' }}` on the component. – tim-phillips Jul 31 '20 at 01:33
2

also works if the inline color should apply on the ``, inside the ` – Itay Tur Mar 01 '21 at 08:21
4

Maybe this is obvious, but when I did this using svgs I made in inkscape, there was also a style tag at the bottom of the svg with fill=#000000 that was overriding my color preferences. I deleted that line and it worked. If you're doing this method and it still isn't updating or only the stroke is updating, then that might be worth considering. – thatguy1155 Mar 10 '21 at 00:45
Earlier created wrapper component around each svg, then gave props for stroke, etc. This solution is simple & excellent, tx – Manohar Reddy Poreddy Aug 25 '22 at 13:21

score 55 · Accepted Answer · edited Sep 10 '21 at 09:49

55

use your SVG as a component, then all the SVG goodness is accessible:

const MenuIcon = (props) =>(
    <svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
)

And in your render

<li>
   <a href="/" className="sidebar__link">
      <MenuIcon fill="white"/>
    </a>
</li>

edited Sep 10 '21 at 09:49

Rifky Niyas

1,737
10
25

answered Feb 04 '19 at 17:29

Fpunkt

976
7
13

1

Thanks, but do i have to create component for all the my icons? I have about 5 icons to include. – Deejay Feb 04 '19 at 19:20
1

That's the way to manipulate the SVG DOM, yes. The only other option is to use css filters on the – Fpunkt Feb 04 '19 at 19:45
Anyway, it would be kind of you and maybe helpful for others with the same question in mind if you marked this question as answered. – Fpunkt Feb 05 '19 at 14:35
Hey Bibi... I worked, I am new to react so it took a while to get it...thanks again! – Deejay Feb 06 '19 at 10:31
did you forget the src attribute? – Raphael Pinel Oct 30 '19 at 10:34
No, this example does not use an external file as a source but rather contains the code of the svg itself. – Fpunkt Oct 31 '19 at 05:33
4

You can use tools like https://www.smooth-code.com/open-source/svgr/ to automatically create react components from SVG files. – Alex C Nov 04 '19 at 18:46

score 39 · Answer 3 · answered Feb 11 '20 at 23:26

You can change css of svg by accessing g or path. Starting from create-react-app version 2.0

import React from 'react'
import {ReactComponent as Icon} from './home.svg';

export const Home = () => {

    return (
        <div className='home'>
            <Icon className='home__icon'/>
        </div>
    );
};

.home__icon g {
 fill: #FFFFF;
}
.home__icon path {
 stroke: #e5e5e5;
 stroke-width: 10px;
}

score 7 · Answer 4 · answered Jul 30 '21 at 10:23

If you want to change the color of svg without changing the style of svg or without doing any change in the code of svg itself.

You can change the color of svg as an image also.

This can be done with applying filter property of css. Change your color to css filter.

For the blue

Hex code = #0000ff
blue to filter: invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%);

code

<img src="path/to/svg" 
  style={{filter: "invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%)"}} 
/>

Reference

score 7 · Answer 5 · answered Dec 20 '21 at 11:17

7

I found an interesting solution to this problem. Don't know if it works in all cases though... Okay so I have an svg that import like:

import LockIcon from "../assets/lock.svg"

and then render it as:

<LockIcon color={theme.colors.text.primary} />

and then in lock.svg I just add fill="currentColor" in the svg tag.

Hopefully this can useful for some of you.

answered Dec 20 '21 at 11:17

Kevin H Griffith

238
4
8

Wow, Idk why but it's working!! Underrated solution, thanks! – Erick Gutierrez Mar 08 '22 at 16:38
2

I assume that both of you are using Create React App, which uses [SVGR](https://react-svgr.com/) under the hood to automatically turn SVG icons into React components. – zeptonaut May 02 '22 at 16:16

score 4 · Answer 6 · answered Jun 05 '20 at 08:15

In my case, I needed to delete this part of my svg file to make it work:

<style type="text/css">
    .st0{fill:#8AC6F4;}
</style>

an then this works

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

Anshu Shekhar · Answer 7 · 2020-06-22T13:09:10.180

As of React 16.13.1, you can use the SVG directly as a component and pass fill prop to change the colour. Please have a look at the following example:

home.svg

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"/></svg>

ShowIcon/index.js

import React from 'react';

import HomeIcon from './home.svg';

const ShowIcon = props => {
    return (
        <HomeIcon fill='#ccc' />
    )
}

export default ShowIcon;

However, I noticed after testing with several icons that it doesn't work with all the icons. So, please test it before using.

Just a note: if this isn't working with your icon, it's very likely because the icon has a hard-coded fill color rather than using `fill="currentColor"` in the appropriate places. Replacing the hard-coded value with `fill="currentColor"` will probably solve the problem. — zeptonaut, May 10 '22 at 20:08

score 3 · Answer 8 · answered Dec 02 '22 at 13:30

I use this approach:

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo fill='red' stroke='green'/>
  </div>
);

Although you don't have to set colors to current in SVG to make it work.

<svg fill="current" stroke="current" ....> ... </svg>

You can keep some default colors so that you don't have to set them in React component each time you are using the SVG, but only when it's necessary.

<svg fill="#ffffff" stroke="#ffffff" ....> ... </svg>

score 1 · Answer 9 · answered Sep 05 '22 at 19:28

1

Make sure the fill attribute of the path tag inside your .svg file is set to "none" otherwise this won't work

<Icon fill="white"/>

answered Sep 05 '22 at 19:28

Bar Horing

5,337
3
30
26

score -1 · Answer 10 · answered Jan 29 '20 at 14:59

-1

My suggestion is to use a tool like SVG to font convertor, icomoon is my favorite, create your own custom font library for importing your SVG icons

Props

Change color, font size, etc with CSS for icons
Use in the entire project with a single import
They are providing some free icons/ icons bundle

Cons

Initial learning curve
Properly follow the dimensions, outline etc while creating an SVG icons
Difficult for multicolor icons

answered Jan 29 '20 at 14:59

Jaison James

4,414
4
42
54

A final, but big con is accessibility - this approach removes all text in an svg that is readable (tooltip, description, and title), thereby making it useless in readers for users with accessibility challenges. – weo3dev Feb 18 '20 at 01:38
Thanks for the point, I am always trying to keep a custom title whenever it's required. – Jaison James Feb 18 '20 at 15:12

score -1 · Answer 11 · answered Nov 09 '21 at 15:29

-1

I faced the same issue, tried most of the suggestions with no luck.

I solved it in a very simple way... no need to create a component for the SVG image

>>> Only add the wanted color as fill in <path fill='#9d8189' ...></path> in .svg file

answered Nov 09 '21 at 15:29

Hessah

192
3
12

How do I add color to my svg image in react

11 Answers11

Linked