如何从API收到的名称中导入图标？

Question

我正在使用 ionic.io （我想与反应图标的操作类似）。在使用图标之前，需要导入它：

示例：

import { chevronBackOutline, chevronForwardOutline, speedometerOutline } from 'ionicons/icons';

后端的 API 向我发送 JSON 格式的响应，其中包含有关要使用的图标的信息（图标的名称）。例如：

{
  parentIcon: "chevronBackOutline"
}

根据收到的名称，如何导入此图标？

Answer 1

我知道一些解决方案，但也许你知道更好、更有效的方法？

1. import * from 'ionicons/icons';

   - 在我看来，这是一种低效的方法。
2. 这看起来不错，但也许还有更好的东西？

const getIcon = (iconName) => {
  return import(`ionicons/icons/${iconName}`).then(module => module[iconName]);
};

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>