Tengo un componente, llamémoslo Frame y quiero que represente dinámicamente svgs en el cuerpo del componente principal.

Tengo un accesorio que es props.svg que es un enlace a la ubicación donde se almacena el svg. p.ej. ./files/svg/Hello.svg

 //parent component <Frame src={props.svg} /> //child component const Frame = (src) => { return ( <> {src} </> ) }

Sin embargo, no está representando el svg como pretendía. ¿Cómo debo almacenar el SVG como su archivo nativo o de alguna otra manera? y ¿cómo lo obtendría del archivo en lugar de imprimir la ubicación del archivo ./files/svg/Hello.svg ?

EDITAR: entiendo cómo importar un archivo SVG, pero mi problema es que los accesorios del componente principal cambiarán dinámicamente, por lo que no estoy seguro de cómo importarlo correctamente, ya que cambiará el prop (src) del SVG. Tampoco quiero construir un componente para cada SVG si es evitable.