Font-awesome issue with Reactjs & Typescript

I am working on React Redux and typescript app. My package.json contains following versions of font awesome.

    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-common-types": "^0.1.7",
    "@fortawesome/fontawesome-free-brands": "^5.0.13",
    "@fortawesome/fontawesome-free-regular": "^5.0.13",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/react-fontawesome": "0.0.20",

My App.tsx looks like this in which i am using External Loading loading method to configure fontawesome in project.

import * as React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Counter from './containers/Counter';

// Font awesome Stuff for Global Use
import fontawesome from '@fortawesome/fontawesome';
import brands from '@fortawesome/fontawesome-free-brands';
import regular from '@fortawesome/fontawesome-free-regular';
import solid from '@fortawesome/fontawesome-free-solid';
fontawesome.library.add(brands, regular, solid);

class App extends React.Component {
  public render() {
    return (
      <BrowserRouter>
        <div>
          <p>Hello</p>
          <Route path="/" component={Counter} />
        </div>
      </BrowserRouter>
    );
  }
}
export default App;

My Counter.tsx which is in Components folder looks like this.

import * as React from 'react';
import { connect } from 'react-redux';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

export interface IAppProps {
  counter: number;
  onIncrementCounter: any;
}

class Counter extends React.Component {
  public props: IAppProps;
  public render() {
    return (
      <div>
        <p onClick={this.props.onIncrementCounter}>Counter: {this.props.counter}</p>
        <FontAwesomeIcon icon="check-square" />
        Popular gadgets come from vendors like:
        <FontAwesomeIcon icon={['fab', 'apple']} />
        <FontAwesomeIcon icon={['fab', 'microsoft']} />
        <FontAwesomeIcon icon={['fab', 'google']} />
      </div>
    );
  }
}

const mapStateToProps = (state: any)=>{
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = (dispatch: any)=>{
  return {
    onIncrementCounter: ()=> { 
      dispatch({type: 'INCREMENT'})
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

But it is giving me this issue

`Failed to compile.

/Users/cdalvi/Documents/typescript/mace-vaa-frontend/src/containers/Counter.tsx
(3,29): Could not find a declaration file for module '@fortawesome/react-fontawesome'. 
'/Users/cdalvi/Documents/typescript/mace-vaa-frontend/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';`

I checked this #125 but Hard Luck 😦

[qathom]

Hello,

I’d like to share my solution to this issue. You need to set your icon as type IconName, [IconPrefix, IconName] or IconLookup. See here. Make sure to cast your string icons (For example: const icon = 'coffee' as IconName).

import { FunctionComponent } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconName } from '@fortawesome/fontawesome-common-types';

type Props = {
  title: string,
  icon: IconName,
};

const ComponentExample: FunctionComponent<Props> = ({ title, icon }: Props) => {
  return (
    <div>
      <h3>{title}</h3>
      <FontAwesomeIcon icon={icon} />
    </div>
  );
};

export default ComponentExample;

[EvgeniyRRU]

Faced the same problem.

import * as React from 'react';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
import { faAddressBook } from '@fortawesome/free-solid-svg-icons';

import 'bootstrap/dist/css/bootstrap.css';
import './storybook.css';

library.add(faPlayCircle, faAddressBook);

const EngineWrapper: React.SFC = (props) => (
  <div className="wrapper">
    { props.children }
  </div>
);

export default EngineWrapper;

Such component doesn’t compile. ERROR in ./src/stories/Wrapper.tsx (10,13): error TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'. Type 'IconDefinition' is not assignable to type 'IconPack'. Index signature is missing in type 'IconDefinition'.

Why @fortawesome/free-regular-svg-icons and ‘@fortawesome/free-solid-svg-icons’ have different interfaces? And what should to do if I need regular icons, especially this one?