Font Awesome with React and Typescript

I’m not quite sure if this is the right place to post. I’m try to bring up a new project using react and typescript using font awesome. I’ve been using react and font-awesome for over a year and am a font-awesome pro subscriber (user?, member?).

I’m starting from the standard create-react-app (with typescript options) and the starter app runs fine. However after adding font-awesome and fontawesome-react things go badly. I’ve spend an entire day fighting with various errors trying to get this to work.

I’m using react 16.3; typescript 2.8.3

From my package.json here is the font-awesome stuff I have loaded:

"dependencies": {
        "@fortawesome/fontawesome": "^1.1.5",
        "@fortawesome/fontawesome-free-solid": "^5.0.10",
        "@fortawesome/react-fontawesome": "0.0.18",
        "@types/react-fontawesome": "^1.6.2",

In my App’s main file (App.tsx created by create-react-app), my current iteration has the following lines at the start of the file:

import faCoffee from "@fortawesome/fontawesome-free-solid/faCoffee";
import FontAwesomeIcon from "@fortawesome/react-fontawesome"

and in my render method I return:

<FontAwesomeIcon icon={faCoffee} />

The compiler errors are:

Module '"/Users/rich2129/Documents/src/zconsole2/node_modules/@fortawesome/fontawesome-free-solid/faCoffee"' has no default export.
File '/Users/rich2129/Documents/src/zconsole2/node_modules/@fortawesome/fontawesome-free-solid/faCoffee.d.ts' is not a module.
Could not find a declaration file for module '@fortawesome/react-fontawesome'. '/Users/rich2129/Documents/src/zconsole2/node_modules/@fortawesome/react-fontawesome/index.js' implicitly has an 'any' type.
  Try `npm install @types/fortawesome__react-fontawesome` if it exists or add a new declaration (.d.ts) file containing `declare module 'fortawesome__react-fontawesome';`
File '/Users/rich2129/Documents/src/zconsole2/node_modules/@fortawesome/react-fontawesome/index.d.ts' is not a module.

I have tried changing my tsconfig.json to add (and remove) ‘allowSyntheticDefaultImports’. I’ve tried prerelease versions of the components.

I’m running out of ideas (and posts on here and stackoverflow to try). Any help would be appreciated. Thanks in advance.

[leotm]

@RichSnei we have an example that sounds very similar to what you’re trying:

https://github.com/FortAwesome/react-fontawesome/tree/development/examples/create-react-app-typescript

Can you post a codesandbox.io or something that reproduces the issue? (Or a GitHub gist?)

Do you have a React/TypeScript example that uses @fortawesome/fontawesome-pro?

[paustint]

I think the only thing you need to do is bump the version @fortawesome/fontawesome so that the typescript typings are included (but you might need to check to be sure)

Here is my setup that has been working for three months

package.json

    "@fortawesome/fontawesome": "^1.2.0-2",
    "@fortawesome/fontawesome-free-brands": "^5.0.6",
    "@fortawesome/fontawesome-pro-light": "^5.0.6",
    "@fortawesome/fontawesome-pro-regular": "^5.0.6",
    "@fortawesome/fontawesome-pro-solid": "^5.0.6",
    "@fortawesome/react-fontawesome": "0.1.0-1",

index.tsx

import fontAwesomeLib from './core/common/icon-library';

fontAwesomeLib.init();

./core/common/icon-library

/**
 * Library for all icons used in library
 * Only icons explicitly imported will be used in application
 *
 * To import an entire library:
 * import brands from '@fortawesome/fontawesome-free-brands'
 * fontawesome.library.add(brands);
 *
 *
 */

import * as fontawesome from '@fortawesome/fontawesome';

/** SOLID ICONS (PREFIX: fas (default)) */
import * as faSun from '@fortawesome/fontawesome-pro-solid/faSun';
import * as faList from '@fortawesome/fontawesome-pro-solid/faList';
import * as faEllipsisH from '@fortawesome/fontawesome-pro-solid/faEllipsisH';
import * as faPlusCircle from '@fortawesome/fontawesome-pro-solid/faPlusCircle';
import * as faTrashAlt from '@fortawesome/fontawesome-pro-solid/faTrashAlt';
import * as faTimes from '@fortawesome/fontawesome-pro-solid/faTimes';
import * as faUser from '@fortawesome/fontawesome-pro-solid/faUser';
import * as faAngleDown from '@fortawesome/fontawesome-pro-solid/faAngleDown';
import * as faSync from '@fortawesome/fontawesome-pro-solid/faSync';
import * as faCalendar from '@fortawesome/fontawesome-pro-solid/faCalendar';
import * as faCalendarCheck from '@fortawesome/fontawesome-pro-solid/faCalendarCheck';
import * as faCheck from '@fortawesome/fontawesome-pro-solid/faCheck';
import * as faPencil from '@fortawesome/fontawesome-pro-solid/faPencil';
import * as faCheckCircle from '@fortawesome/fontawesome-pro-solid/faCheckCircle';
import * as faExclamationTriangle from '@fortawesome/fontawesome-pro-solid/faExclamationTriangle';
import * as faCaretLeft from '@fortawesome/fontawesome-pro-solid/faCaretLeft';
import * as faCaretRight from '@fortawesome/fontawesome-pro-solid/faCaretRight';

/** REGULAR ICONS (PREFIX: far) */
import * as faHourglass from '@fortawesome/fontawesome-pro-regular/faHourglass';
import * as faHourglassStart from '@fortawesome/fontawesome-pro-regular/faHourglassStart';
import * as faHourglassHalf from '@fortawesome/fontawesome-pro-regular/faHourglassHalf';
import * as faHourglassEnd from '@fortawesome/fontawesome-pro-regular/faHourglassEnd';
import * as faCircle from '@fortawesome/fontawesome-pro-regular/faCircle';
import * as faSlidersH from '@fortawesome/fontawesome-pro-regular/faSlidersH';

/** PRO LIGHT ICONS (PREFIX: fal) */
import * as faCalendarLight from '@fortawesome/fontawesome-pro-light/faCalendar';
import * as faEnvelope from '@fortawesome/fontawesome-pro-light/faEnvelope';
import * as faSlidersHLight from '@fortawesome/fontawesome-pro-light/faSlidersH';
import * as faUndoAlt from '@fortawesome/fontawesome-pro-light/faUndoAlt';
import * as faLongArrowLeft from '@fortawesome/fontawesome-pro-light/faLongArrowLeft';
import * as faSave from '@fortawesome/fontawesome-pro-light/faSave';
import * as faThumbsUp from '@fortawesome/fontawesome-pro-light/faThumbsUp';
import * as faSignOut from '@fortawesome/fontawesome-pro-light/faSignOut';
import * as faSpinnerThird from '@fortawesome/fontawesome-pro-light/faSpinnerThird';

/** BRAND ICONS (PREFIX: fab) */
import * as faWindows from '@fortawesome/fontawesome-free-brands/faWindows';

export default {
  init: () => fontawesome.library.add(
    faSun,
    faList,
    faEllipsisH,
    faPlusCircle,
    faTrashAlt,
    faTimes,
    faUser,
    faAngleDown,
    faSync,
    faCalendar,
    faCalendarCheck,
    faCheck,
    faPencil,
    faCheckCircle,
    faExclamationTriangle,
    faCaretLeft,
    faCaretRight,

    faHourglass,
    faHourglassStart,
    faHourglassHalf,
    faHourglassEnd,
    faCircle,
    faSlidersH,

    faCalendarLight,
    faEnvelope,
    faUndoAlt,
    faLongArrowLeft,
    faSave,
    faThumbsUp,
    faSignOut,
    faSlidersHLight,
    faSpinnerThird,

    faWindows,
  )
};

// <FontAwesomeIcon icon={item.icon as any} fixedWidth={true} />