Así que recientemente me hice cargo de un proyecto. el tipo antes que yo usó SVG. mi problema es que hacen que el documento JSX sea muy difícil de leer. hay un montón de etiquetas como la de abajo.
<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> Originalmente, este proyecto se creó con HTML estándar, js, CSS, y supongo que probablemente sea por eso. mi pregunta es: ¿cuál es la organización correcta del archivo de reacción? ¿Debo guardar todas estas rutas en un archivo js diferente e importarlas? ¿Debería agregar import ReactSVG from 'react-svg' en lugar de usar las etiquetas? estoy un poco confundido con esto
Puede crear una carpeta personalizada en src para icons de ejemplo si estos svgs resultan ser iconos. Y cree el componente q reaccionar que contiene el código svg.
import React from "react"; const MyIcon = () => { return( <svg> {/* svg code here */} </svg> ) }Y usar este componente en otros