动态导入React Fontawesome图标

Question

在一个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;

- Ammar Ismaeel

Answer 1

实际上，有一种更好的方法可以避免迭代所有图标（@Andrei Rosu 的解决方案），你可以导出整个品牌和实心包：

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.

- Ander

Answer 2

在App.js中，你可以像这篇文章所示，导入所有图标，代码如下：

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

- Andrei Rosu

---

谢谢您的回答，我想使用的图标名称是未知的，它们来自对数据库的请求，因此这种方法行不通。 - Ammar Ismaeel

@AmmarIsmaeel，请查看我编辑后的帖子，了解如何导入所有这些图标。 - Andrei Rosu

谢谢，它起作用了，虽然我不喜欢导入所有图标的想法，但似乎这是唯一的解决方案。 - Ammar Ismaeel

@AmmarIsmaeel 如果动态地逐个导入它们，那么这个过程是异步的，这将会更加棘手。如果你在开始时就全部导入它们，那么这不应该成为问题。 - Andrei Rosu

我相信有超过26,000个图标。很难相信你的数据库引用了所有这些图标。也许可以查询图标名称的唯一列表，并创建一个子集或套件。这应该大幅减少图标的加载量。 - like2think

Answer 3

可以使用React的动态导入来完成此操作，而无需导入所有图标。只需将导入字符串替换为所需的动态变量即可。

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

function example(){
  const Icon = React.lazy(() => import('@fortawesome/free-solid-svg-icons/faEnvelope').then(({definition}) => ({default: () => <FontAwesomeIcon icon={definition} />})));
    
  return <React.Suspense><Icon /></React.Suspense>;
}

- Jaime Masson

Answer 4

我认为没有必要导入所有的图标。你可以在你的app.js中导入一些图标，例如：

import {library} from '@fortawesome/fontawesome-svg-core';
import { faAngleRight, faArrowRight ... } from '@fortawesome/pro-light-svg-icons'; 

library.add(faAngleRight, faArrowRight, ...)

然后像这样使用它：

<FontAwesomeIcon icon="fal fa-angle-right" />

或者动态地将其作为属性传递给任何组件（例如带图标的按钮）：

<FontAwesomeIcon icon={icon} />

- MMysiv

Answer 5

只需将 Fontawesome CDN 添加到您的 HTML Header 中，然后使用任何您想要的图标即可。

在 React 中，它可能是这样的：

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

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

- MohammadMahdiRafiei

---

但是我想使用@fortawesome/react-fontawesome包，不想使用任何CDN并将其放置在HTML中，最好将包放在您的项目中。 - Ammar Ismaeel