导入图标动态反应 fontawesome答案

【问题标题】：import icons dynamically react fontawesome导入图标动态反应 fontawesome
【发布时间】：2021-02-04 19:05:13
【问题描述】：

我在 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;

【问题讨论】：

标签： reactjs icons font-awesome

【解决方案1】：

在 App.js 中，您可以导入所有图标，如 this post 中所示，如下所示：

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" />

【讨论】：

感谢您的回答，我要使用的图标名称未知，它们来自对数据库的请求，因此这种方式行不通
@AmmarIsmaeel 请查看我编辑的帖子，了解如何导入所有这些图标
谢谢，它工作，虽然我不喜欢导入所有图标的想法，它似乎是唯一的解决方案
@AmmarIsmaeel 动态一个一个导入会比较麻烦，因为过程是异步的。如果一开始就全部导入应该没问题。

【解决方案2】：

实际上有一种更好的方法，无需迭代所有图标（@Andrei Rosu 的解决方案），您可以导出整个 brand 和 solid 包：

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'

// This exports the whole icon packs for Brand and Solid.
library.add(fab, fas)

并使用它们：

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

<FontAwesomeIcon icon={['fab', 'apple']} /> // any icon from Brand.
<FontAwesomeIcon icon={['fas', 'coffee']} /> // any icon from Solid.

【讨论】：

【解决方案3】：

只需将Fontawesome CDN 添加到您的HTML Header 并使用您想要的任何图标，

在反应中会是这样的：

    <i className={object.ico}><i/>

Object.ico 应该是一个包含图标名称的字符串，例如far fa-xyz

【讨论】：

但是我想使用@fortawesome/react-fontawesome 包，我不想使用任何cdn并将其放在html中，最好在您的项目中有包