html - 如何制作一个 html 标签/ react-icons 数组而不是一一调用

Question

有没有办法制作一组反应图标名称并导入它们，当我渲染它们时通过iconsArray [i]在地图中调用它们？我有一个包含 6 个项目的网格，而不是手动填充它们，有什么方法可以制作一个数组和一个要渲染的地图？

就像是：

const sportsArray = ["Football", "Tennis"];
const iconArray = ["GiSoccerBall", "BiTennisBall"];

return(
  {sportsArray.map((sport, i) => (
          <!-- iconArray[i] -->
          <h1 className="sport-name">{sport}</h1>
        ))}
);