Title: React component to render SVGs dynamically from props
Tags: javascript;reactjs
Question: 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} /&gt;
//child component
const Frame = (src) =&gt; {
return (
<&gt;
{src}
</&gt;
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.
Comment: @DennisVash yes, don't think I explained my issue very well! Please read my edit :)

Comment: @Aystub this is why I'm not sure what to do... I need access to the data in the SVGs which is another reason not to return an `img` but I also need to render them dynamically and can't import them like this as there are hundreds, unless I could do something like `import mysvg from './files/svg/${name}.svg';` then it could work this way, but as far as I'm aware CRA doesn't allow dynamic imports like this?

Comment: @Aystub Thanks, that package was very helpful! Managed to solve my problem with it, thank you again!

Comment: Did you read your framework docs? For CRA: https://create-react-app.dev/docs/adding-images-fonts-and-files/

Comment: If `props.svg` is just the relative path to the file, you'd need Frame to contain something that uses it as its `src` right? Like in Frame you'd need to return `` and not just return `src` itself. Although if I remember right, if you're using CRA at least, there's probably going to be an issue with just passing a relative file path to it anyway. When CRA (webpack) builds the project that file path isn't going to exist anymore. So you have to do like `import mysvg from './files/svg/Hello.svg'` and then pass `mysvg` to Frame.

Comment: @John107 preserve the data in the SVGs meaning you just want to keep it as an inline `` element? I've used react-svg (https://www.npmjs.com/package/react-svg) for that before. It'll handle injecting the whole `` structure into the DOM for you and you'd just need to do ``. You could use the public folder (https://create-react-app.dev/docs/using-the-public-folder/) to get around the import thing I suppose. Add a subfolder like `public/svgs` then you just need to do ``


Here is another answer: You have to transform your SVG file to a component, just like this (create a file.js) :
const File= () =&gt; (
//put the content of SVG
<svg
xmlns=&quot;http://www.w3.org/2000/svg&quot;
&gt;
</svg&gt;
export default File
and then use :
<Frame src={ <File /&gt;} /&gt;
Comment for this answer: Thanks, I thought I would have to do this. However, how can I get the `Frame` component to load the SVG's dynamically? Any ideas?
Comment for this answer: I didn't understand your question? Frame component has a src component where you can define dynamically the svg that you want to pass (it just you have to store your svg's files as a components)

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:09/16/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs>', 'Title': 'React component to render SVGs dynamically from props', 'ViewCount': 103, 'id': 69210454, 'user_AboutMe': None, 'user_AccountId': 6267553.0, 'user_DisplayName': 'John107', 'user_Reputation': 1867.0, 'user_Views': 126.0, 'user_id': 4872757.0}}