I have a large svg that I am trying to animate in a react app as a component (basically looks like a pitch indicator on an aircraft). The svg I have made on Inkscape has been exported as plain svg and I have used svgr to make it into a component.

The problem is is that there are multiple 'groups' that I want to be able to pass properties to, i.e. transform(x,y). But as the svg is quite large, it's quite unmanageable to work with. The svg has format:

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

Is there any way of turning this into multiple files that I can call into the component file so I can more easily manage the manipulation? i.e.

const component = (some props) => (
<svg> 

<g from another file with props/> e.g. transform
<g from another file with props/> 
etc

</svg> 

)

I am quite new to using this so this may not be the best way of going about doing it (or even possible?). Would anyone have any suggestions of how to go about doing this?

Thanks!