title: How to dynamically import SVG and render it inline
body: <p>I have a function that takes some arguments and renders an SVG. I want to dynamically import that svg based on the name passed to the function. It looks like this:</p>
  <pre><code>import React from 'react';
  
  export default async ({name, size = 16, color = '#000'}) =&gt; {
    const Icon = await import(/* webpackMode: &quot;eager&quot; */ `./icons/${name}.svg`);
    return &lt;Icon width={size} height={size} fill={color} /&gt;;
  };
  </code></pre>
  <p>According to the <a href="https://webpack.js.org/api/module-methods/#magic-comments" rel="noreferrer">webpack documentation for dynamic imports</a> and the magic comment &quot;eager&quot;:</p>
  <blockquote>
  <p>&quot;Generates no extra chunk. All modules are included in the current
  chunk and no additional network requests are made. A Promise is still
  returned but is already resolved. In contrast to a static import, the
  module isn't executed until the call to import() is made.&quot;</p>
  </blockquote>
  <p>This is what my Icon is resolved to:</p>
  <pre><code>&gt; Module
  default: &quot;static/media/antenna.11b95602.svg&quot;
  __esModule: true
  Symbol(Symbol.toStringTag): &quot;Module&quot;
  </code></pre>
  <p>Trying to render it the way my function is trying to gives me this error:</p>
  <p><code>Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.</code></p>
  <p>I don't understand how to use this imported Module to render it as a component, or is it even possible this way?</p>