整合react和react-fontawesome

Question

react-fontawesome文档建议创建一个自定义库，只包含一个需要的图标。

他们说要这样做：

• 添加所需的软件包。

• 像这样创建自定义库：

  import { library } from '@fortawesome/fontawesome-svg-core';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faStroopwafel } from '@fortawesome/free-solid-svg-icons';
  
  library.add(faStroopwafel);
  

• 像这样使用自定义库：

   import React from 'react'
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  
       ...
       return(<FontAwesomeIcon icon="stroopwafel" />);
  

问题与第二步有关：是否可以为库创建创建单独的文件？我不喜欢在应用程序入口点放置一长串图标的想法。

让我感到困惑的是，没有什么可导出的，因为它只是一个函数调用（library.add）。我应该导出执行库创建的自调用函数吗？

Answer 1

也许您可以编写一个包含已填充库的文件：

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

library.add(faStroopwafel);

在主文件中，仅导入该库和FontAwesomeIcon：

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

function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon="stroopwafel" />
    </div>
  );
}

编辑：感谢@mwilkerson的改进版本