I have a component, lets call it Frame and I want it to dynamically render svgs into the body of the parent component.
I have a prop which is props.svg which is a link to the location of where the svg is stored. eg. ./files/svg/Hello.svg
//parent component
<Frame src={props.svg} />
//child component
const Frame = (src) => {
return (
<>
{src}
</>
)
}
However it's not rendering the svg as I intended. How should I be storing the SVG as it's native file or some other way? and how would I get it from the file instead of printing the file location ./files/svg/Hello.svg?
EDIT: I understand how to import an SVG file, but my issue is that the props from the parent component will change dynamically so I'm unsure how to import it correctly as the prop (src) of the SVG will change. I also don't want to build a component for each SVG if it's avoidable.
You have to transform your SVG file to a component, just like this (create a file.js) :
const File= () => (
//put the content of SVG
<svg
xmlns="http://www.w3.org/2000/svg"
>
</svg>
)
export default File
and then use :
<Frame src={ <File />} />