integrate react and react-fontawesome

Question

The react-fontawesome documentation suggests to create a custom library, to only include the icons one needs.

They say to do as follow:

• Add required packages.

• Create custom library like so:

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

• Use custom library like so:

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

The question is about the 2nd step: is it possible to create a separate file for the library creation? I don't like the idea of having a long list of icons in my application entry point.

What confuses me is that there isn't anything to export, since is it is only a function call (library.add). Should I export a self calling function that executes the library creation?

Answer 1

Maybe you can write a file that contains your filled library :

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

library.add(faStroopwafel);

And in your main file, only import this library and FontAwesomeIcon:

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

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

Edit : Thanks to @mwilkerson for the improved version