CODEWITHSUNDEEP
htmlreactjssvg
JAN
JAN

Reputation: 21865

Change SVG Fill color in React JS

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

Upvotes: 4

Views: 25688

Answers (5)

A.A.
A.A.

Reputation: 251

This worked for me in react-native. If you have the svg file, you can use it in a function component like this.

for ex.

import React from 'react';  
import {Svg, Path} from 'react-native-svg';

const Icon = ({fill = 'white', height, width}) => ( 
  <Svg height={height} width={width} viewBox="0 0 15 15">    
    <Path d="xxx xxx xxx" fill={fill} />
  </Svg> 
);

Then import this component and pass the desired fill prop value

Hope this work for you too.

Upvotes: 0

Vishnu
Vishnu

Reputation: 1701

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

Upvotes: 4

Akin Aguda
Akin Aguda

Reputation: 463

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

Upvotes: 4

Sergii Shvager
Sergii Shvager

Reputation: 1256

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;

Upvotes: 2

Joe Lloyd
Joe Lloyd

Reputation: 22363

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.

Upvotes: 1

Related Questions