1

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" />.

  1. Is it possible to import static files like this? import myImg from '/public/assets/mySvg.svg'?

  2. 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?

ueeieiie
  • 1,412
  • 2
  • 15
  • 42

0 Answers0