React-starter-kit: [Question] How to import font-awesome to project with Webpack?

[zinroc]

I am a beginner with Webpack and am having a lot of trouble figuring out what to do in webpack.config.js to import font-awesome for use in React components like this:

<span className="fa fa-user" />

I've tried following multiple tutorials (for example https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md) that use different loaders and rules (i.e. style-loader, css-loader etc.), but nothing has worked for me (I'm sure if I was more knowledgeable about Webpack configuration I'd be able to make it work), and often those approaches introduce bugs with how the project loads all the other css files (i.e. interfering with isomorphic-style-loader).

For now the temporary solution I've made is adding this link to Html.js head:

      <link
        rel="stylesheet"
        href={fontawesomeCDNURL}
        crossOrigin="anonymous"
      />

Obviously, I'd rather be using a local font-awesome package.

can someone ELI5 how to set up webpack.config.js to load font-awesome for this project or point me in the right direction?

Thanks!

(P.S if you have the Font Awesome 5 beta and figured out how to get the SVG Framework approach to work with react-starter-kit, that works too)

[Burry]

Here's how I set up FontAwesome 5's SVG framework with RSK and Webpack.

In a component:

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faTwitter } from '@fortawesome/fontawesome-free-brands';

...

<FontAwesomeIcon icon={faTwitter} fixedWidth size="2x" />

package.json
(include whatever free or pro modules you need)

"dependencies": {
    "@fortawesome/fontawesome": "^1.1.4",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-pro-light": "^5.0.8",
    "@fortawesome/fontawesome-pro-solid": "^5.0.8",
    "@fortawesome/react-fontawesome": "^0.0.17",
    ...
}

webpack.config.js

...
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------

const config = {
  ...
  resolve: {
    ...
    // FontAwesome tree shaking
    // Include an entry for each FontAwesome icon module
    alias: {
      '@fortawesome/fontawesome-free-brands':
        '@fortawesome/fontawesome-free-brands/shakable.es.js',
      '@fortawesome/fontawesome-pro-light':
        '@fortawesome/fontawesome-pro-light/shakable.es.js',
      '@fortawesome/fontawesome-pro-solid':
        '@fortawesome/fontawesome-pro-solid/shakable.es.js'
    }
  },
  ...

More info on using FontAwesome with React can be found here.

[zinroc]

This works, thank you!