title: How to import and render components dynamically in Svelte/Sapper?
body: <p>I have a component (<code>IconInline.html</code>), within which I would like to import and render components dynamically based on a prop (<code>IconID</code>) passed to it.</p>
  
  <p>Currently I do it manually like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{{#if IconID === "A"}}
      &lt;A /&gt;
  {{elseif IconID === "B"}}
      &lt;B /&gt;
  {{elseif IconID === "C"}}
      &lt;C /&gt;
  {{elseif IconID === "D"}}
      &lt;D /&gt;
  {{/if}}
  
  &lt;script&gt;
      import A from "./icons/A.html";
      import B from "./icons/B.html";
      import C from "./icons/C.html";
      import D from "./icons/D.html";
  
      export default {
          components: { A, B, C, D }
      };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to</p>
  
  <ol>
  <li>Import all components in a given directory dynamically?</li>
  <li>Render a specific component that matches a given prop?</li>
  </ol>