javascript - 在循环中迭代和渲染 SVG

Question

我已经使用 React 进行迭代映射很长时间了，并且取得了很多成功。我唯一没有遇到的是用迭代渲染 SVG。

从 React 组件开始设置迭代 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;

数据数组...

数据.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

尝试像这样设置它:

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>