Font-awesome: Confusing npm documentation

[amir-s]

I have the pro license and I wanted to integrate the pro icons with my nextjs app.
The documentation is very confusing to me.
The examples given are based on the free icons which you have to install the variants separately. For the pro package the documentation says I have to install @fortawesome/fontawesome-pro which doesn't have the variant in its name.
Anyway, I do

import { fas } from '@fortawesome/fontawesome-pro';
library.add(fas);

And I get this error: TypeError: Cannot read property 'prefix' of undefined.

So, I'll try

import { fas } from '@fortawesome/fontawesome-pro-solid';
library.add(fas);

and Typescript yells at me

Argument of type 'IconPack' is not assignable to parameter of type 'IconDefinitionOrPack'.
  Type 'IconPack' is missing the following properties from type 'IconDefinition': icon, prefix, iconNamets(2345)

I install @fortawesome/fontawesome-common-types it doesn't help.

    "@fortawesome/fontawesome-common-types": "^0.2.28",
    "@fortawesome/fontawesome-pro": "^5.13.0",
    "@fortawesome/fontawesome-pro-solid": "^5.1.0-3",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/react-fontawesome": "^0.1.9",

I change all the above to latest, doesn't help. I remove the pro and leave the pro-solid, it still same errors. I add pro and remove the pro-solid, same error.

And there is no documentation (at least I couldn't find) about how and if @fortawesome/fontawesome-pro differs from @fortawesome/fontawesome-pro-solid and if these include the free icons as well or not.

I couldn't get this to work.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I will try to clarify at my best

"@fortawesome/fontawesome-pro-solid": "^5.1.0-3",

This is an old, pre-5.1 package that should not be included anymore. We changed how 5.1 works, as well as package names.

Ref: https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md#new-packages-available-for-browser-only-integration

So, the first thing to do, is to remove that old pre-release package.

---

Then:

@fortawesome/fontawesome-pro

This is a generic package, containing distributable css and js files. As you can see on the documentation, https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#next the next step is to reference all.css or all.js.

From the opening post, I can see that your use case is different:

import { fas } from '@fortawesome/fontawesome-pro-solid';
library.add(fas);

I understand that you are interested in using the JavaScript API, so you should also remove @fortawesome/fontawesome-pro in favor of

@fortawesome/fontawesome-svg-core
@fortawesome/pro-solid-svg-icons
@fortawesome/pro-regular-svg-icons //optional, according to your use case
@fortawesome/pro-light-svg-icons //optional, according to your use case
@fortawesome/pro-duotone-svg-icons //optional, according to your use case

Ref: https://fontawesome.com/how-to-use/javascript-api/setup/getting-started

Let me know if this helps

[amir-s]

Thank you @tagliala
This solved my issue and it works perfectly now. I didn't know fontawesome-pro-solid is deprecated and none of my google searches told me that :D

I hope this post shows up in google now for people in the future dealing with the same problem.

Also, how would someone know about @fortawesome/pro-solid-svg-icons? The JS API page only talks about free-solid-svg-icons.

[tagliala]

Hi,

the comparative table of all packages is available in the third page of the "Set Up" section, "Importing Icons":

https://fontawesome.com/how-to-use/javascript-api/setup/importing-icons#packages

There are a lot of different use cases for the JavaScript API, keeping everything in a single page is hard. I think that the order Getting Started, Config, Importing Icon is correct.

Any suggestion on how to improve this?

[amir-s]

Yeah I think it makes sense.
Do you also think printing a message like "this package is deprecated" or something is possible when using ontawesome-pro-solid? That'll also help.

I think we can close this issue now.
Again, thank you for your help :)

[tagliala]

Do you also think printing a message like "this package is deprecated" or something is possible when using fontawesome-pro-solid? That'll also help.

I can see the correct deprecation message on the free package: https://www.npmjs.com/package/@fortawesome/fontawesome-free-solid

I cannot check the pro repo at the moment, will do that later

I think we can close this issue now.

Welcome

---

edit: I can confirm that no deprecation message is provided on the shell while installing the old packages in both free and pro packages.

I think that this is not necessary, because we get just few reports about this issue and FA 5.1 has been released 2 years ago, but let's ask @robmadole and @mlwilkerson if it is the case to release 5.1.0-pre4 for both free and pro with a deprecation message

[robmadole]

Yeah, we don't get a ton of support on the [email protected] email box. So I don't think we need to do anything additional.