Итерация и рендеринг SVG в цикле

Попробуйте настроить его так:

import menu from './icons/menu.svg';
import home from './icons/home.svg';
import clock from './icons/clock.svg';

export default[
 {
   svg: menu,
   type: 'Menu'
 },
{
   svg: home,
   type: 'Home'
 },
 {
   svg: clock,
   type: 'History'
 }
]

И реализуем это так:

<div>
  <span>
    <img src = {icon.svg} />
  </span> 
  {icon.type}
</div>

Храните свои данные такими, какие они есть, и используйте require для их рендеринга

<div>
  <span>
    {require(icon.svg)}
  </span> 
  {icon.type}
</div>

Спасибо, ребята, что нашли время, чтобы помочь ... Этот метод действительно работает, дал мне идею, и я это отмечаю. Но это было не совсем то, что я искал, поскольку для этого пришлось бы использовать теги <img>, которые не позволили бы мне регулировать размер, цвет и т. д. Я хочу избежать перехода между редактором кода и программами иллюстрации. К счастью, я нашел альтернативное решение, оно может быть утомительным, но оно работает. Вот что я сделал ...

Начнем с создания компонента React PropTypes ..

Icon.js

import React from 'react';
import PropTypes from 'prop-types';

const config = {
  svg: {
    display: 'flex-inline',
    margin: '0 auto'
  }
};

const Icons = props => (
  <svg
    style = {config.svg}
    width = {`${props.size}`}
    height = {`${props.size}`}
    viewBox = {`0 0 512 512`}
    className = {props.className}
  >
    <path d = {props.icon} />
  </svg>
);

Icons.propTypes = {
  icon: PropTypes.string.isRequired,
  size: PropTypes.number.isRequired,
  color: PropTypes.string,
  className: PropTypes.string.isRequired
};

Icons.defaultProps = {
  size: 32
};

Создайте другой файл и включите массив путей SVG с определенным именем например. меню, дом, часы

icons.js

export const SVGicon = {
  menu: /*Insert your SVG path here starting with 'M...*/, 

  home: /*Insert your SVG  path here starting with 'M...*/,

  clock: /*Insert your SVG path here starting with 'M...*/,

}

Вернемся к data.js и немного изменим (Спасибо, Тед!)

data.js

import { SVGicon } from './icons'

export default[
  {
    svg: SVGicon.menu,
    type: 'Henu'
  },
  {
    svg: SVGicon.home,
    type: 'Home'
  },
  {
    svg: SVGicon.clock,
    type: 'History'
  }
]

Вернемся, чтобы отреагировать на компоненты и немного изменить ...

Cards.js

import React from 'react';
import data from './data';
import Icon from './Icon'; /* PropType Component */

const icons = data.map(icon => (
 <React.Fragment>
  <Icons icon = {icon.svg} className = "svg-icon" size = {12} />
 </React.Fragment>
));

const Cards = () => (<React.Fragment>{ icons }</React.Fragment>);

export default Cards;

и css после className = "svg-icon" для настройки цвета, эффекта и т. д.

main.scss

.svg-icon{
  fill: rgba(blue, .5);
  transition: fill .3s ease-out;
  &:hover{
    fill: rgba(red, 1);
 }

Это должно показать массив различных значков SVG с возможностью управления цветом, размером и т. д. Надеюсь на эту помощь

Я бы добавил это как комментарий к @sirrius, но репутации маловато :)

Я последовал предложенному решению, но мои значки не были видны. Это связано с тем, что порт просмотра по-прежнему принимает статические значения вместо значений динамического размера для ширины и высоты.

Так что вместо:

const Icons = props => (
  <svg
    style = {config.svg}
    width = {`${props.size}`}
    height = {`${props.size}`}
    viewBox = {`0 0 512 512`}
    className = {props.className}
  >
    <path d = {props.icon} />
  </svg>
);

в котором значки будут иметь высоту и ширину viewBox 512 независимо от размера (представьте, что у него есть svg размером 32 внутри 512 viewBox, он может оказаться вне поля зрения, потому что размеры не пропорциональны).

У тебя должно быть:

const Icons = props => (
  <svg
    style = {config.svg}
    width = {`${props.size}`}
    height = {`${props.size}`}
    viewBox = {`0 0 ${props.size} ${props.size}`}
    className = {props.className}
  >
    <path d = {props.icon} />
  </svg>
);

Это регулирует viewBox в соответствии с предоставленным размером.