Tengo un svg grande que estoy tratando de animar en una aplicación de reacción como componente (básicamente parece un indicador de tono en un avión). El svg que hice en Inkscape se exportó como svg simple y usé svgr para convertirlo en un componente.

El problema es que hay varios 'grupos' a los que quiero poder pasar propiedades, es decir, transformar (x, y). Pero como el svg es bastante grande, es bastante inmanejable trabajar con él. El svg tiene formato:

 <svg> <g></g> <g></g> : : <g></g> </svg>

¿Hay alguna forma de convertir esto en varios archivos que pueda llamar al archivo del componente para poder administrar la manipulación más fácilmente? es decir

 const component = (some props) => ( <svg> <g from another file with props/> eg transform <g from another file with props/> etc </svg> )

Soy bastante nuevo en el uso de esto, por lo que puede que no sea la mejor manera de hacerlo (¿o incluso posible?). ¿Alguien tiene alguna sugerencia de cómo hacer esto?

¡Gracias!