incompatible type when it is supposed to be fit

Question

I have a component like the following

import {library} from "@fortawesome/fontawesome-svg-core";
import {
  faFacebookSquare,
  faPinterest,
  faPinterestSquare,
  faTwitterSquare,
  faWhatsappSquare,
  faTwitter
} from "@fortawesome/free-brands-svg-icons";


....



// The below line is not working because faFacebookSquare is not compatible with IconPack

 library.add(faFacebookSquare, faTwitterSquare, faPinterest, faPinterestSquare, faWhatsappSquare);

In my interface, I have the below code.

type IconDefinitionOrPack = IconDefinition | IconPack;
export interface Library {
  add(...definitions: IconDefinitionOrPack[]): void;
  reset(): void;
}

This the error in my IDE

Error: src/app/photostudio/studioHome/studio.component.ts:577:17 - error TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'.
  Type 'IconDefinition' is not assignable to type 'IconPack'.
    Index signature for type 'string' is missing in type 'IconDefinition'.

577     library.add(faFacebookSquare, faTwitterSquare, faPinterest, faPinterestSquare, faWhatsappSquare);

Here is a part of my package.json

"ngx-sharebuttons": "^10.0.0",
"@fortawesome/angular-fontawesome": "^0.10.1",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/free-brands-svg-icons": "^5.15.4"

Answer 1

You have a problem with versions of the packages. That error happened in the past: https://github.com/FortAwesome/Font-Awesome/issues/12575#issuecomment-381243737

I checked the versions you have, and probably they are not compatible between them. You can try the following solution.

Change from:

"@fortawesome/angular-fontawesome": "^0.10.1",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/free-brands-svg-icons": "^5.15.4"

To:

"@fortawesome/angular-fontawesome": "latest",
"@fortawesome/fontawesome-svg-core": "latest",
"@fortawesome/free-solid-svg-icons": "latest",
"@fortawesome/free-brands-svg-icons": "latest"

Then delete node_modules and run npm install again. Now test if the problem was solved. If you are looking for a different version of the packages, you have to research which versions work well between them.

Regards!