How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App? : <p>I have a component that takes in an :itemName and spits out an html bundle containing an image. The image is different for each bundle.</p>

<p>Here's what I have:</p>

<pre><code>import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import SVGInline from "react-svg-inline";

export default (props) =&gt; (
  &lt;NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}&gt; {React.createElement(SVGInline, {svg: props.itemName})} &lt;/NavLink&gt;
)
</code></pre>

<p>How could I make this component work?</p>

<p>I know that if I just imported all my images explicitly, I could just call my images like so...</p>

<pre><code>import SVGInline from "react-svg-inline";
import SASSSVG from "./images/sass.svg";

&lt;NavLink className="hex" activeClassName="active" to="/hex/sass"&gt;&lt;SVGInline svg={ SASSSVG } /&gt;&lt;/NavLink&gt;
</code></pre>

<p>This would work, but since I need to include ~60 svgs, it adds A LOT of excess code.</p>

<p>Also, I found <a href="https://stackoverflow.com/questions/41086081/importing-all-files-from-a-folder-in-react">in this question</a> this code...</p>

<pre><code>import * as IconID from './icons';
</code></pre>

<p>But that doesn't seem to work (it was part of the question, not the answer), and the answer was a bit too nonspecific to answer the question I'm asking.</p>

<p>I also found <a href="https://stackoverflow.com/questions/40852337/dynamically-importing-an-svg-in-react">this question</a> but again there's an answer (although unapproved) that possess more questions than it answers. So, after installing react-svg, I set up a test to see if the answer works like so...</p>

<pre><code>import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { NavLink } from 'react-router-dom';
import ReactSVG from 'react-svg'

export default (props) =&gt; (
  &lt;NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}&gt;
    &lt;ReactSVG
      path={"images/" + props.itemName + ".svg"}
      callback={svg =&gt; console.log(svg)}
      className="example"
    /&gt;
  &lt;/NavLink&gt;
)
</code></pre>

<p>But, just as the OP of that question was asking, the page can't find my svg even after copying my entire image folder into my build folder. I've also tried "./images/"</p>

<p>I feel like I'm just missing one last key piece of information and after searching for the past day, I was hoping someone could identify the piece I'm missing.</p>
