title: React: Import svg as component dynamically
body: <p>In my application I got 8 svg files which I want to import dynamically. I have tried the following:</p>
  <p>First I created a Floor component that has one name prop. This is the name of the floor that the user wants to see. In my dynamic import, the path to the svg is specified but it always seems to return undefined.</p>
  <p>I know the path to the svg is correct because if I fill in a wrong path, React complains it can't find the svg file.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  
  const Floor = ({ name }) =&gt; {
  
    const [floor, setFloor] = useState(null);
  
    useEffect(() =&gt; {
  
      /*
      This is where it goes wrong. If I log the result It shows 'undefined'.
      */
  
      import(`./floors/${name}.svg`)
        .then((module) =&gt; {
          setFloor(module);
        })
        .catch((error) =&gt; {
          console.error(`Icon with name: ${name} not found!`);
        });
    }, [name]);
  
    const renderFloor = () =&gt; {
      if (!floor) return null;
  
      const Floor = floor.ReactComponent;
  
      return &lt;Floor /&gt;;
    };
  
    return &lt;&gt;{renderFloor()}&lt;/&gt;;
  }
  
  export default Floor;
  </code></pre>
  <p>And this is how I import the Floor</p>
  <pre><code>import Floor from './Floor'
  
  const Floorplan = () =&gt; {
  
    return (
      &lt;Floor name=&quot;floor-4&quot; /&gt;
    )
  }
  
  export default Floorplan;
  </code></pre>
  <p>I have found something <a href="https://stackoverflow.com/questions/61339259/how-to-dynamically-import-svg-and-render-it-inline">similar</a> but I still have the same error 'undefined'</p>
  <p>These are the errors Im getting.<br>
  <b>
  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</b></p>
  <p>And if I log the dynamic import response:</p>
  <p><b>Object { loaded: Getter, id: Getter, exports: undefined, webpackPolyfill: 1 }
  Icon.js:14</b></p>