Remove <Fa /> component

[kopax]

v4

Font awesome released a V5 version and this time, they improved the use case for webpack and react.

They now have dedicated components, font, svg, and react component, making our interface obselete.

• <FontAwesomeIcon /> source code.
• ReactJS usage: https://fontawesome.com/how-to-use/on-the-web/using-with/react
• Npm usage: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
• Upgrade guide: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

This ticket consist of testing the V5 in our project, and replacing V4 to V5.

important

They are some breaking change, read the Upgrade guide for more info.

[kopax]

This is an example of usage of the v5:

It is possible to use a configuration file to keep using string when using an icon:

fontawesome.config.js:

// `library` is needed for injecting the icon it the fontawesome engine
import { library } from '@fortawesome/fontawesome-svg-core';
// Regular icon
import { faAddressCard } from '@fortawesome/free-regular-svg-icons';
// Basic icon svg
import {
  faServer
} from '@fortawesome/free-solid-svg-icons';
// Brand icon svg
import {
  faFacebookSquare,
  faTwitterSquare,
  faLinkedin,
  faGithub,
  faDocker,
  faPython,
  faReact,
  faCss3Alt,
  faHtml5,
  faJava,
  faJs,
  faJsSquare,
} from '@fortawesome/free-brands-svg-icons';
// Initialize icon, this will be allowed anywhere in the app using icon="server", 
// or icon={'fab', 'java'} for brand icon
library.add(
  faFacebookSquare,
  faTwitterSquare,
  faLinkedin,
  faGithub,
  faDocker,
  faPython,
  faReact,
  faCss3Alt,
  faHtml5,
  faJava,
  faJs,
  faJsSquare,
);

Just import this file in App.js, this allow to configure icon globally and import the strictly necessary at one place instead of everywhere.

Otherwise, it is possible to pass the import to <FontAwesomeIcon icon={faFacebookSquare} />, but this requires to import faFacebookSquare every time you need to use it.

It can be use with react:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
<FontAwesomeIcon className="my-4" size="4x" icon={['fab', 'java']} />

note that fab prefix is used as new prefix for brand icon

The size props still exist and doesn't require any migration: see: https://github.com/FortAwesome/react-fontawesome/blob/master/src/components/FontAwesomeIcon.js#L126

This also means fontawesome 5 doesn't need anymore webpack configuration.

To install:

$ npm install --save \
  @fortawesome/fontawesome-svg-core \
  @fortawesome/free-brands-svg-icons \
  @fortawesome/free-regular-svg-icons  \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/react-fontawesome

In case you wonder what is @fortawesome: it is the official namespace for fontawesome v5.

[kopax]

/cc @santaclauze can we state where is fontawesome actually used ?

• @bootstrap-styled/rsg-components
• @bootstrap-styled/navigation-bar ?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.