Change the color of an SVG in React

avatar

Borislav Hadzhiev

Fri May 27 20222 min read

Updated - Fri May 27 2022

Change the color of an SVG in React #

To change the color of an SVG in React:

  1. Don't set the fill and stroke attributes on the SVG.
  2. Import the SVG as a component.
  3. Set the fill and stroke props on the component, e.g. <MyLogo fill="black" stroke="yellow" />.
App.js
import {ReactComponent as MyLogo} from './my-logo.svg'; export default function App() { return ( <div> <MyLogo fill="black" stroke="yellow" /> </div> ); }

And here is the svg for the example.

my-logo.svg
<svg width="400" height="400"> <circle cx="100" cy="100" r="50" stroke-width="5" /> </svg>

react change svg color

Notice that we didn't set the fill and stroke attributes on the svg element.

Fill and stroke will only be applied when set through the component props if they haven't been defined in the svg.

The fill prop sets the color inside the object and the stroke prop sets the color of the line drawn around the object.

Alternatively, you can paste your SVG into a component and take the colors as props.

App.js
function MyLogo({fill, stroke}) { // 👇️ paste SVG into a component // take fill and stroke colors as props return ( <svg fill={fill} stroke={stroke} width="400" height="400"> <circle cx="100" cy="100" r="50" stroke-width="5" /> </svg> ); } export default function App() { return ( <div> <MyLogo fill="black" stroke="yellow" /> </div> ); }

The code sample above achieves the same result, but we store the SVG directly in a component instead of importing it from a file with an svg extension.

Notice that the MyLogo component takes the fill and stroke values as props and applies them to the svg element.

This should be your preferred approach if you don't have a loader in place that allows you to import SVGs as components.

Thanks to Robyn Van Gool for lots of corrections and helping me improve the article.

Use the search field on my Home Page to filter through my more than 1,000 articles.