整合 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 的改进版