Problems with the PRO version

wonaGuillermo commented 6 months ago

I bought the PRO version of Fontawesome and I am developing a project with Angular. My problem is that I did everything I found in the documentation but I can only use the free icons.

I am using Angular 16.1.5, in my dependencies I have:

"dependencies": {
    "@angular/animations":"^16.1.5",
    "@angular/cdk": "16.2",
    "@angular/common":"^16.1.5",
    "@angular/compiler":"^16.1.5",
    "@angular/core": "^16.1.5",
    "@angular/forms":"^16.1.5",
    "@angular/platform-browser":"^16.1.5",
    "@angular/platform-browser-dynamic": "^16.1.5",
    "@angular/router":"^16.1.5",
    "@angular/service-worker": "^16.1.5",
    "@awesome.me/kit-XXXXXXXXXXXXXXX":"^1.0.22",
    "@fortawesome/angular-fontawesome": "^0.13.0",
    "@fortawesome/fontawesome/fontawesome-pro": "^6.5.1",
    "@fortawesome/fontawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/pro-light-svg-icons": "^6.4.0",
    "@fortawesome/pro-regular-svg-icons": "^6.4.0",
    "@fortawesome/pro-solid-svg-icons":"^6.4.0",
}

In my module I import the free icons but I can't import the PRO icons.

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

export class SharedModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fab, far, fas);
  }
}

This is because the PRO icons are exported with the same names and even if I change the free ones for the PRO ones I get an error when trying to compile, it doesn't recognize the 'fas' from @fortawesome/pro-solid-svg-icons, what am I doing wrong? There are not many examples of using PRO icons. I can't add @fortawesome/pro-light-svg-icons and @fortawesome/pro-regular-svg-icons either.

I followed the steps on the "Use Your Kit with a Package Manager" page. And I have my .npmrc file created with my information

@awesome.me:registry=https://npm.fontawesome.com/
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXXXXXXXXXXXXX

Are the kits not usable with @fortawesome/angular-fontawesome 0.13.0? or with any version?

I would appreciate your help.

devoto13 commented 6 months ago

There is currently an issue with Kits - https://github.com/FortAwesome/angular-fontawesome/issues/423.

Pro packages, like @fortawesome/pro-solid-svg-icons you should be able to use without issues. If it does not work, please create a minimal reproduction of a problem and push it to the GitHub repo, so I can take a look. To create a minimal reproduction, you can generate a new project using ng new and then add a minimal code which produces the error. Don't include your authToken in the .npmrc though.

wonaGuillermo commented 6 months ago

If there are problems with the kits then what should be the steps to follow, create the .npmrc file and then install angular-fontawesome? The problem is that if you use the free icons and the PRO icons as I import all of them with

constructor(library: FaIconLibrary) {
    library.addIconPacks(fab, far, fas);
}

In the same module?

devoto13 commented 6 months ago

Pro icon packages include all free icons too, so you don't need to import both Pro and Free. It's enough to import only Pro to get all icons.

wonaGuillermo commented 6 months ago

So as the kits don't work I just create the .npmrc file and add the library with ng add @fortawesome/angular-fontawesome@ importing in my project the PRO icons? or are there more steps?

devoto13 commented 6 months ago

Those steps should be sufficient.

wonaGuillermo commented 6 months ago

Finally I managed to make the PRO icons work with the Angular library for Fontawesome, I leave a commentary of how I did it in case it is helpful for anyone:

1- Create the .nmprc file with the data they give you in the Fontawesome panel to use the token.

2- Install the version of the library for your version of Angular and choose the PRO and Free icons for the Brands.

3- Import into the module as usual.

I think the problem was because I tried to use the kits and installed other libraries that were requested in the documentation.

FortAwesome / angular-fontawesome

Problems with the PRO version #427