How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?

Question

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.

Here\'s what I have:

Answer 1

Instead of multiple SVG files you can use the single SVG sprite.

SVG sprite can be generated from a directory of SVG files using svg-sprite-generator:

svg-sprite-generate -d images -o images/sprite.svg

Then use it like this:

import React from 'react';
import { NavLink } from 'react-router-dom';
import sprite from './images/sprite.svg';

export default (props) => (
  
    
  
)