Динамически загружайте svgs как компоненты в реакции

Question

Моя проблема в основном такова: У меня есть куча изображений SVG, хранящихся в файле .js, как это

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>

в другом компоненте я хочу визуализировать правильное изображение на основе массива, например, у меня есть:

import {React,Angular,JQuery} from '../svgs'
const images = [
    'React','React','JQuery','Angular','JQuery'
]

нет, я хочу визуализировать каждое изображение, на самом деле сделать что-то вроде этого

<div>
images.map (image => <image>)
</div>

Answer 1

вы должны внести некоторые изменения в svgs.js, так как вы снова экспортируете именованную константу React, чтобы она вызвала ошибку дублирования при импорте.

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>

После этого импортируйте их куда хотите

import {react, angular, jQuery} from '../svgs'

// don't use quotes as it represents string
// const images = [
//   'react', 'angular', 'jQuery'
// ]

const images = [
    react, angular, jQuery
]

И последний раз используйте их в jsx

render() {
  return (
    <div>
     // use uppercase letter for React component 
     {images.map((Image, index) => <Image key={index} />)}
    </div>
  )
}