Dynamically load svgs as components in react - reactjs

Question

My issue is basically this:
I have a bunch of svg images all stored in a .js file like this
import React from 'react'
export const React = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="#c90016"/></svg>
export const Angular = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="#c90016"/></svg>
export const JQuery = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="#c90016"/></svg>
in another component I want to render correct image based on an array, so for instance I have:
import {React,Angular,JQuery} from '../svgs'
const images = [
'React','React','JQuery','Angular','JQuery'
]
no I want to render each image, actually to do something like this
<div>
images.map (image => <image>)
</div>

Answer 1

you have to make some changes in svgs.js as you are exporting a named constant React again so it will throw duplication error when you import it.
import React from 'react'
export const react = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="#c90016"/></svg>
export const angular = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="#c90016"/></svg>
export const jQuery = () =>
<svg width="40" height="40" viewBox="0 0 256 256"><ellipse cx="238.456" cy="39.252" rx="28.346" ry="26.522" fill="green"/></svg>
After that import them where you want
import {react, angular, jQuery} from '../svgs'
// don't use quotes as it represents string
// const images = [
// 'react', 'angular', 'jQuery'
// ]
const images = [
react, angular, jQuery
]
And last use them in jsx
render() {
return (
<div>
// use uppercase letter for React component
{images.map((Image, index) => <Image key={index} />)}
</div>
)
}