How to change svg color in react js?

Hi Friends 👋,

Welcome To aHoisting!

To change svg color in react js, you can change the fill and stroke properties directly from the App component. It will change svg color in react js.

Today, I am going to show you, how to change svg color in react js.

Table of contents

• Install and create a new React app.
• Import react component.
• Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React from "react";
import { ReactComponent as Logo } from './man.svg';

Step 3: Create a Component.

You can use <Logo height={500} width={500} fill="red" stroke="green"/> to change svg color in react js.

<div>
  <Logo  height={500} width={500} fill="red" stroke="green"/>
</div>

Change svg color example.

The below code is an example of a React. You have to import ./man.svg and set <Logo height={500} width={500} fill="red" stroke="green"/> to change svg color in react js.

App.js

import React from "react";
import { ReactComponent as Logo } from './man.svg';

const App = () => (
  <div>
    <Logo  height={500} width={500} fill="red" stroke="green"/>
  </div>
);

export default App;

OR

import React from "react";

const App = () => {
  return (
    <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" strokeWidth="2" stroke="black" fill="blue" />
    </svg>
  );
};

export default App;

In the above code example, I have used the fill="red" stroke="green" to change svg color in react js.

Check the output of the above code.

All the best 👍