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

You can simply make a function which takes a parameter "name" (your svg icon name) and return your svg code.

import React from 'react' export function getIcon(name){ switch(name) { case 'back': return ( // your svg code here ) } }

And then you can import it anywhere and simply call it with icon name you want.

import { getIcon } from './utils'
render() {
  return (
    

     { getIcon('back') }
    
  )
}