title: Webpack loaders in require.context on a Typescript create-react-app
body: <p>I have far too many svg icons to import them all in the recommended way:</p>
  <p><code>import { ReactComponent as Icon } from 'assets/svg/icon.svg'</code></p>
  <p>So in my JS React apps I've been using webpack's <code>require.context</code> to index the entire svg directory and export it as an object, which then allows me to do this:</p>
  <pre class="lang-js prettyprint-override"><code>import { svg } from 'assets'
  
  function SvgIcon({ icon }) {
    const Icon = svg[icon]
    return &lt;Icon /&gt;
  }
  
  /* ... */
  
  &lt;SvgIcon icon='inbox' /&gt;
  </code></pre>
  <p>Which is amazing for my use case because I can load all the icons I need dynamically without even having to individually import them. However, as soon as I switched to Typescript, <code>require.context</code> ceased to use the svg loader. This code, which used to work perfectly before, now only returns <code>{ [filename]: &quot;/path/to/filename.39843398.svg&quot; }</code>, which is what would happen if I didn't use a loader at all. That string is supposed to be a ReactComponent instead.</p>
  <pre class="lang-js prettyprint-override"><code>const assets = context =&gt;
    context.keys().reduce((assets: any, path) =&gt; {
      const key = path.replace(/^\.\//, '').replace(/\..*$/, '')
      assets[key] = context(path).default || context(path)
      return assets
    }, {})
  
  export const svg = assets(require.context('!@svgr/webpack!./svg', false, /\.svg$/))
  </code></pre>
  <p>Codesandbox doesn't seem to support require.context, but you can reproduce this very easily by creating a react app with <code>--template typescript</code>, installing @svgr/webpack, adding assets/svg, copying the logo.svg there, making an index.ts and copypasterino the codeblocks above.</p>
  <p>Depending on your package manager and sdk you may have to fiddle with the config a bit. I had to install @types/webpack-env and add them to <code>tsconfig.json</code> like so:</p>
  <pre class="lang-json prettyprint-override"><code>{
    /* ... */
    &quot;types&quot;: [&quot;node&quot;, &quot;webpack-env&quot;]
  }
  </code></pre>