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?

Jayffe · Accepted Answer · 2018-07-27 20:37:44Z

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

edited Jul 27, 2018 at 20:37

answered Jul 27, 2018 at 15:42

Jayffe

1,28910 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mwilkerson Over a year ago

Yes, and you could make it just a bit more tidy by removing the export from MyLib.js and do the import as import "./MyLib". The idea is that you are importing "for side effects only", not for binding any exports. The side effect in question is the invocation of library.add(). See forked CodeSandbox: codesandbox.io/s/qvw0q92nyw

Jayffe Over a year ago

You're right, thanks for this ! i'll edit the answer .

Collectives™ on Stack Overflow

integrate react and react-fontawesome

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related