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

Question

Я делаю карту итераций с реакцией уже довольно давно и с большим успехом.Единственное, с чем я не сталкивался, это рендеринг SVG с итерацией.

Начните с реактивного компонента, настроив итерацию mp и импортировав массив данных из ./data.js.

Cards.js

import React from 'react';
import data from './data';

const icons = data.map(icon => (
  <>
   <div><span>{icon.svg}</span> {icon.type}</div>
  </>
));

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

export default Cards;

Массивdata ...

data.js

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

Проблема в том, что он не может отобразить .svg в следующем каталоге, но в итоге возвращает строку ./icons/xxx.svg.

Я пробовал другой метод ..

svg: require('./icons/clock.svg'),

... все еще получаю тот же результат.У меня заканчиваются идеи.Какие-либо предложения?Я понимаю, что require('') работал с тегом JSX img ... Но я хочу только файлы .svg, есть ли способ импортировать файлы svg в массив данных?

Answer 1

Сохраните ваши данные как есть и используйте их для визуализации

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

Answer 2

Спасибо, ребята, что нашли время помочь ... Эти методы работают, дали мне идею, и я ее записываю.Но это было не совсем то, что я искал, поскольку в нем должны были бы использоваться теги <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, с возможностью управления цветом, размером и т. Д. Надеюсь, это поможет

Answer 3

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

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>