整合react和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