How to use svg in react

 In this post we will discuss how to use svg in react. 

if you are using CRA(create-react-app) than  you can use svg as following:

import { ReactComponent as Logo } from "./assets/logo-color.svg";

function App() {

  return (

    <div>

        <Logo />

    </div>

  );

}

export default App;

if you are using vite you need to follow following steps:

1) install vite-plugin-svgr

npm i vite-plugin-svgr

2)use following code in vite.config

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react(), svgr()],

});

3)

import { ReactComponent as Logo } from "./assets/logo-color.svg";

function App() {

  return (

    <div>

        <Logo />

    </div>

  );

}

export default App;