title: Importing all files from a folder in react
body: <p>I am importing all SVG's from a folder in 'icons' through an index.jsx like the following line:</p>
  
  <p>index.jsx:</p>
  
  <pre><code>export about from './about.svg';
  </code></pre>
  
  <p>Here goes the Import:
  Button.jsx</p>
  
  <pre><code>import React from 'react';
  import './MenuIcon.scss';
  import * as IconID from './icons';
  
  const Button = (props) =&gt; {
      return (
          &lt;div className="menu-icon" &gt;
              &lt;div className={'menu-icon__icon-wrapper'}&gt;
                  &lt;IconID.about /&gt; // This works great
                  &lt;IconID['about'] /&gt; // This does not work
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default Button;
  </code></pre>
  
  <p>Now to get a specific Svg e.g. I just call  in the return methode and everything works fine. </p>
  
  <p>Now I want to load different SVG's like:</p>
  
  <pre><code>const svgName = 'back';
  
  return (&lt;IconId['back'] /&gt;);
  </code></pre>
  
  <p>How can i make this possible?</p>