如何在 React 中为 FontAwesome 图标创建动态通用的图标包装器

Question

我想创建一个 React Icon-Component，我只需向其中传递一个带有图标名称的字符串，然后图标就会被渲染。

我按照此处的说明进行操作：https://fontawesome.com/docs/web/use-with/react/add-icons

我添加了 babel-plugin-macros 包，然后创建了一个如下所示的组件方法（Icon.tsx）：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconName } from '@fortawesome/fontawesome-common-types';
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'

type Props = {
    iconName: string;
};

const Icon: React.FC<Props> = ({ iconName }) => {
    let iconNameType: IconName = iconName as IconName;

    return (
        <span>
            <FontAwesomeIcon icon={icon({ name: iconNameType })} />
        </span>
    );
};

export default Icon;

我认为将字符串转换为 FontAwesome 的 IconName 类型就足够了。

对此组件的调用示例应如下所示（Welcome.tsx）：

import React from 'react';
import Icon from 'Icon';

const Welcome: React.FC = () => {

  let content = (
    <Icon iconName='Heart' />
  );

  return content
};

export default Welcome;

没有构建错误，但是当我在浏览器中启动应用程序时，我只是在开发人员工具控制台中看到一个带有此错误的空白页面：

Uncaught ReferenceError: process is not defined
    js index.js:3
    __require2 chunk-TFWDKVI3.js:18
    js node-modules-paths.js:2
    __require2 chunk-TFWDKVI3.js:18
    js async.js:5
    __require2 chunk-TFWDKVI3.js:18
    js index.js:1
    __require2 chunk-TFWDKVI3.js:18
    js index.js:5
    __require2 chunk-TFWDKVI3.js:18
    node_modules @fortawesome_fontawesome-svg-core_import__macro.js:26182
    __require2 chunk-TFWDKVI3.js:18
    <anonymous> @fortawesome_fontawesome-svg-core_import__macro.js:26404

有人知道我的方法错误在哪里吗？

是否有更好的方法来基于带有图标名称的字符串来动态加载图标？