Background:
I have a folder of SVG's which is being served by the server-side with express.static('public)
.
Inside my component, I want to: import SVG from '/public/assets/${filename}.svg'
.
The filename
is a props being passed into the component.
Problem
I need to do something like this:
Pseudo code!:
const ChildComponent = (props) => {
import MySvg from '/public/assets/${props.filename}.svg'; //This is not working
return(
<MySvg />
);
}
Questions:
When I use an image from the static files I refer to it like this:
<img src="/public/assets/myImg.jpeg" />
.
Is it possible to import static files like this?
import myImg from '/public/assets/mySvg.svg'
?How can I lazy import the SVG file, when I need to use some props value in order to create the path to the SVG file?