Change SVG Fill color in React JS

Question

Consider:

import LOGO from './something.svg';
<img src={LOGO} className={'logo'} alt="Logo"/> // 

How can I change fill color of SVG in ReactJS ?

I've tried also to use ReactComponent but I got 'ReactComponent' is not exported from ....

import { ReactComponent as Logo1 } from './something.svg';
<Logo1 /> // doesn't work : 'ReactComponent' is not exported from ....

Solution 1

You have to import react in the component but to change the fill color the svg has to be called as a component rather than making it as src for img tag.

For eg, if you have an svg file, make it a React component like:

import React from 'react';

const Icon = ({fill, className }) => (
  <svg className={className} version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="umbrella" viewBox="0 0 596 597">
    <title>Umbrella</title>
    <desc>Umbrella icon</desc>
    <path fill={fill} class="shaft" d="M260.4,335.7 L260.4,478 C260.4,543.1 313.4,596.1 378.5,596.1 C443.6,596.1 496.6,543.1 496.6,478 C496.6,457.5 479.9,440.8 459.4,440.8 C438.9,440.8 422.2,457.5 422.2,478 C422.2,502.2 402.7,521.7 378.5,521.7 C354.3,521.7 334.8,502.2 334.8,478 L334.8,335.7 L260.4,335.7 L260.4,335.7 Z"></path>
    <path class="fabric" d="M558,335.7 C578.5,335.7 595.2,319 595.2,298.5 L595.2,294.8 C593.4,132 460.4,0.9 297.6,0.9 L297.6,0.9 C133.9,0.9 0,134.8 0,298.5 C0,319 16.7,335.7 37.2,335.7 L558,335.7 L558,335.7 Z M77.2,261.3 C94.9,156.2 187,75.3 297.6,75.3 C408.2,75.3 500.4,156.2 518,261.3 L77.2,261.3 L77.2,261.3 Z"></path>
  </symbol>
</svg>
);

export default Icon;

And call the Icon in your component with fill.

<Icon fill="#ffffff" className="myclass" />

An alternate solution will be to pass a className like fill prop and use that class name in CSS to change the color, like:

.myclass path {
  fill: #ffffff;
}

Solution 2

In your jsx:

import { ReactComponent as Logo } from './something.svg';

const MyComponent = () => <Logo className="logo" />

in your css:

.logo > path {
   fill: "white"
}

This should work just fine

Solution 3

You can use webpack loader that will transform SVG into react component and there you can add className to change fill or directly pass prop fill to svg react component.

SVGR is an awesome tool that converts your SVG into React components that you can use. So how do we set it up?

First, we install the package $ npm install @svgr/webpack --save-dev.

Then we update our Webpack configuration rule to use SVGR for SVGs:

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  //...
};

Now we can import our SVG images as a React component and use it in our code like this:

import React from 'react';
import ReactLogo from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <ReactLogo fill="white" />
    </div>
  );
}
export default App;

Solution 4

Export component

import React from 'react';
import LOGO from './something.svg';

const Logo = () => <img src={LOGO} className={'logo'} alt="Logo"/>;
export default Logo;

to import this component you should use

import Logo from 'path/to/react/logo/component';

Make sure you have a svg handler in your build process

Webpack doesn't know what to do with svg files by default so it will cause a build time fail. You need to add a plugin or loader to it. Or use something like Next.js or Gatsby that have built in webpack setups.

Fill colour

As for using a fill colour, its not possible when you use an image tag to set your svg in an image tag. You must use the raw svg in your app, that way you can edit the fill.

View more solutions

Comments

[Sergii Shvager]

Are you using create-react-app?

[JAN]

@SergiiShvager : Don't know , how can I check ?

[Joe Lloyd]

do you export the component? looks like you don't in the code

[Sergii Shvager]

Do you have react-scripts in dependencies(package.json) ?

[JAN]

@SergiiShvager : No , I don't.

[Sergii Shvager]

import { ReactComponent } from 'file.svg' works only with create-react-app or @svgr/webpack loader. By default it won't work.

[JAN]

But where do you change the fill color ?

[JAN]

What do I do with the first piece of code const webpack = require('webpack'); .... ? What's the name of this component ?

[Sergii Shvager]

That's usually webpack.config.js file

[Sergii Shvager]

If it is not used anywhere in your config then just remove it ;)

[JAN]

Where do I put this file ? how does the React project knows about its existence ?

[JAN]

I need to use the SVG's filename , by path , not by its injected code.Thanks.

[Vishnu]

@JAN As Joe Lloyd said, you have to use the raw svg, to edit the fill

[Sergii Shvager]

I think you should have already webpack config. Webpack is bundling your project and adds plugins to your code (like this svg one). Search for webpack.config.js

[Sergii Shvager]

Or to simplify things you should do you can create react component from SVG yourself, so you don't need any plugins. Just paste content of SVG here and create new js file then you don't need to touch any webpack magic at all. react-svgr.com/playground

[Goran_Ilic_Ilke]

Nice question @JAN

[Goran_Ilic_Ilke]

Solution with fill attribute inside svg component for me doesnt work.

[Joe Lloyd]

@Goran_Ilic_Ilke you cant change the color with an image tag. you need to load an svg directly.