导入图标动态反应 fontawesome

我在 React js 项目中使用 FontawesomeIcon，图标的名称来自数据库。我想动态地从 @fortawesome/free-solid-svg-icons 导入来自数据库的图标

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faImage} from "@fortawesome/free-solid-svg-icons";

export class Features extends Component {
  render() {
    return (
      <div id="features" className="text-center">
        <div className="container-fluid">
          <div className="features-listing">
            {this.props.data.map((item, index) => (
              <div key={`${index}`}>
                {" "}
                <FontAwesomeIcon icon={item.icon} />
                <h3>{item.title}</h3>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default Features;

在App.js中，您可以导入所有图标，如下所示这个帖子 https://stackoverflow.com/a/56255226/3238392， 像这样：

import {library} from '@fortawesome/fontawesome-svg-core';
import * as Icons from '@fortawesome/free-solid-svg-icons';

const iconList = Object.keys(Icons)
  .filter((key) => key !== 'fas' && key !== 'prefix')
  .map((icon) => Icons[icon]);

library.add(...iconList);

然后，在组件内部，仅导入 FontAwesomeIcon 并使用它们：

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon="times" />