導入圖標動態反應 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;

Answer 1

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

Answer 2

實際上有一個更好的方法而不必迭代所有圖標（@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.

Answer 3

只需簡單地將Fontawesome CDN 添加到您的HTML Header並使用您想要的任何圖標，

在反應中它會是這樣的：

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

Object.ico應該是一個包含圖標名稱的字符串，如far fa-xyz

Answer 4

這可以在不使用 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>;
}

Answer 5

我認為沒有必要導入所有圖標。 您可以在 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} />