ReactSVG and what’s the proper way to organize my current project

So I recently took over a project. the guy before me used SVG. my problem is those make the JSX document very hard to read. there are plenty of tags like the one below.

     <svg viewBox="0 0 488.455 488.455" fill="currentColor">
                    <path d="M287.396 216.317c23.845 23.845 23.845 62.505 0 86.35s-62.505 23.845-86.35 0-23.845-62.505 0-86.35 62.505-23.845 86.35 0" />
                    <path d="M427.397 91.581H385.21l-30.544-61.059H133.76l-30.515 61.089-42.127.075C27.533 91.746.193 119.115.164 152.715L0 396.86c0 33.675 27.384 61.074 61.059 61.074h366.338c33.675 0 61.059-27.384 61.059-61.059V152.639c-.001-33.674-27.385-61.058-61.059-61.058zM244.22 381.61c-67.335 0-122.118-54.783-122.118-122.118s54.783-122.118 122.118-122.118 122.118 54.783 122.118 122.118S311.555 381.61 244.22 381.61z" />
                  </svg>

Originally this project was built using vanilla HTML, js, CSS, and I guess that’s probably why. my question is: what’s the correct react file organization? should I save all these paths into a different js file and import them? should I add import ReactSVG from 'react-svg' instead of using the tags? I am a bit confused about this

Answer

You can create custom folder in src for example icons if these svgs happens to be icons. And create q react component containing svg code in it.

import React from "react";

const MyIcon = () => {
    return(
        <svg>
            {/* svg code here */}
        </svg>
    )
}

And use this component in other ones