React-fontawesome: Font Awesome with React and Typescript

[RichSnei]

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.

[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} />

[paustint]

You can check out issue #83 for additional information on presumably the same issue.

[RichSnei]

I was looking at #83 earlier. It looks like the key may be that you init the library yourself in your main and have your own core library file which contains only the images you use. You are also using older versions of the library.

Cool. I'll give it a try. Thanks

[RichSnei]

Still no joy. My issue is that the definition ReactAwesomeIcon from react-fontawesome is not working with Typescript.

"Could not find a declaration file for module '@fortawesome/react-fontawesome'. '/Users/rich/Documents/src/test/node_modules/@fortawesome/react-fontawesome/index.js' implicitly has an 'any' type.\n Try `npm install @types/fortawesome__react-fontawesome` if it exists or add a new declaration (.d.ts) file containing `declare module 'fortawesome__react- fontawesome';`",
Your declaration stuff worked fine. But I can't get passed the compile error.

[robmadole]

@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?)

[RichSnei]

I wish I had found your example earlier. My head hurts from beating it into my monitor.

I'm not sure whether it was the versions of the components you used or the use of the fontawesome.Library(), but yours works and following the model of what you did, I was able to get fontawesome to work in my sample. I did have to tweak the tslint settings and reorder a bunch of lines to make the compiler happy.

All I can say is thank you.

[robmadole]

@RichSnei I hate that you now have a bruised forehead (I'm assuming it was a "head-butt" style impact). We really don't want our users to have this as the first experience. Our goal is "This is delightful, where have you been all my life Font Awesome React Component?!"

I can tell you that we had a lot of trouble with TypeScript as we were developing it. It was an effort that we underestimated by a magnitude.

[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?

[dgreene1]

@robmadole, I'd like to bump @leotm's request for a typescript example that shows the use of the pro icons in typescript. As best I can tell, there are no types provided with the actual pro repo. If there's some other way to get the icons from the pro repo without importing the pro repo, then I'd love to see that in the readme.

Note:

• I was using @fortawesome/fontawesome-pro since it didn't have the deprecation warning that I was getting when trying to install @fortawesome/fontawesome-pro-light. Ultimately, the import that worked correctly (i.e. with types and without deprecation warnings) was @fortawesome/pro-light-svg-icons. Doesn't that seem confusing?

[elramus]

For what it's worth @dgreene1, I've had success with what you mention in your note there.

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faAsterisk,
  faSpinnerThird,
  faTable,
} from '@fortawesome/pro-light-svg-icons'

library.add(
  faAsterisk,
  faSpinnerThird,
  faTable,
)

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

<FontAwesomeIcon icon={['fal', 'asterisk']} />

Done this on a few large projects now and it's been great. I also installed @types/react-fontawesome, though I'm not positive if it's still necessary or not.