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