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

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

Advertisement

Answer