The size of @fortawesome bundle is not reduced with custom icons

[xfuturomax]

Reproduction

Is it correct that if I import custom icons, the size of the Fortawesome bundle should be reduced?

Steps to reproduce: Do some customisation according to this: https://github.com/MurhafSousli/ngx-sharebuttons/wiki/Icons-Guide-(legacy)#custom-icons

Expected Behavior

Reducing the size of the @fortawesome bundle

Actual Behavior

The size of the @fortawesome bundle is the same big:

Environment

• Angular: v16
• ngx-sharebuttons: v13
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

packages.json

scripts: {
    "webpack:bundle-report": "ng build --configuration production --stats-json && ./node_modules/.bin/webpack-bundle-analyzer dist/browser/stats.json"
},
...
dependencies: {
 "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/material": "^16.2.14",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@angular/upgrade": "^16.2.12",
     "@fortawesome/angular-fontawesome": "^0.13.0",
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-brands-svg-icons": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "ngx-sharebuttons": "^13.0.0",
   ...
},
"devDependencies": {
"@angular/cli": "^16.2.14",
    "@angular/compiler-cli": "^16.2.12",
    "typescript": "~5.1.3",
    "webpack-bundle-analyzer": "^4.10.2"
}

app.module.ts

....
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFacebookF, faRedditAlien, faTelegramPlane, faTwitter, faWhatsapp } from '@fortawesome/free-brands-svg-icons';
import { faLink, faCheck } from '@fortawesome/free-solid-svg-icons';
import { ShareButtonsComponent } from './shared-components/share-buttons/share-buttons.component';

const shareIcons = [
  faWhatsapp,
  faTwitter,
  faRedditAlien,
  faFacebookF,
  faTelegramPlane,
  faLink,
  faCheck,
];

const shareProp = {
  facebook: {
    icon: ['fab', 'facebook-f']
  },
  whatsapp: {
    icon: ['fab', 'whatsapp']
  },
  twitter: {
    icon: ['fab', 'twitter']
  },
  reddit: {
    icon: ['fab', 'reddit-alien']
  },
  telegram: {
    icon: ['fab', 'telegram-plane']
  },
  copy: {
    icon: ['fas', 'link']
  },
  check: {
    icon: ['fas', 'check']
  },
};

....
imports: [
     ShareButtonsModule.withConfig({prop: shareProp}),
],

export class AppModule {
  constructor(iconLibrary: FaIconLibrary) {
    iconLibrary.addIcons(...shareIcons);
  }
}

share-buttons.component.html

<share-buttons 
                   [theme]="'circles-dark'"
                   [include]="['whatsapp','twitter','reddit','facebook','telegram','copy']"
                   [show]="18"
    ></share-buttons>

[MurhafSousli]

If you didn't import the ShareIconsModule it will not import the default share icons.

It could be you are importing icons some where in your project, or your project isn't tree-shaking the imports.

Try to import each icons individually like:

import { faCheck } from '@fortawesome/free-solid-svg-icons/fa-check';
import { faLink } from '@fortawesome/free-solid-svg-icons/fa-link';

instead of

import { faLink, faCheck } from '@fortawesome/free-solid-svg-icons';

[xfuturomax]

If you didn't import the ShareIconsModule it will not import the default share icons.

Sorry, here don't follow. My component works perfectly with this library. Now, I just want to decrease the size of Fortawesome.

It could be you are importing icons some where in your project, or your project isn't tree-shaking the imports.

No, it was the first thing that I checked. My code is in the first message.

your project isn't tree-shaking the imports.

Also no, it's default angular v16 project with aot=true by default 🤷

Try to import each icons individually like:

I'll try it, thank you.

[xfuturomax]

Yes, it helped, thanks: But why is tree-shaking not working? The same was true with lodash, so I had to explicitly import each function.

[MurhafSousli]

I am not sure why, I heard tree-shaking works since even older versions of Angular, but maybe it works for production build only.

[xfuturomax]

But for analyzer I use production build: ng build --configuration production --stats-json && ./node_modules/.bin/webpack-bundle-analyzer dist/browser/stats.json 🤔 Anyway, thanks for the help; I'll try to figure out what can cause this issue with tree shaking. Maybe it's a problem of webpack-bundle-analyzer

[xfuturomax]

Sorry @MurhafSousli to raise the topic again; I don't want to create a new topic. I'm trying to update to the new Angular v17 and also updated to share buttons v14. Conditions are the same. And after analyzing webpack, the issue came back.

This is new code:

import { ShareButtons } from 'ngx-sharebuttons/buttons';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
import { faRedditAlien } from '@fortawesome/free-brands-svg-icons/faRedditAlien';
import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
import { faXTwitter } from '@fortawesome/free-brands-svg-icons/faXTwitter';
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';

const shareIcons = [
  faWhatsapp,
  faXTwitter,
  faRedditAlien,
  faFacebookF,
  faTelegramPlane,
  faLink,
  faCheck,
];

export class AppModule {
  constructor(iconLibrary: FaIconLibrary) {
    iconLibrary.addIcons(...shareIcons);
  }
}

    <share-buttons 
                   [theme]="'circles-dark'"
                   [include]="['whatsapp','x','reddit','facebook','telegram','copy']"
                   [show]="6"
    ></share-buttons>

I don't use:

      customShareButton('facebook', {
        color: 'orange'
      })

and style import.

I tried to specify custom settings, but it doesn't help:

    provideShareButtonsOptions(
      // Override facebook icon
      customShareButton('whatsapp', {
        icon: faWhatsapp
      }),
      customShareButton('facebook', {
        icon: faFacebookF
      }),
      customShareButton('x', {
        icon: faXTwitter
      }),
      customShareButton('reddit', {
        icon: faRedditAlien
      }),
      customShareButton('telegram', {
        icon: faTelegramPlane
      }),
      customShareButton('copy', {
        icon: faLink
      }),
      customShareButton('check', {
        icon: faCheck
      }),
    )

Sorry maybe I miss something. I couldn't find any info taht can help in the wiki.

UPD: I tried this approach, but also doesn't work: I replaced

export class AppModule {
  // constructor(iconLibrary: FaIconLibrary) {
  //   iconLibrary.addIcons(...shareIcons);
  // }
}

with

const iconLibrary = new FaIconLibrary();
iconLibrary.addIcons(...shareIcons);

@NgModule({
...
providers: [
    provideShareButtonsOptions(
      iconsLoaderFactory(iconLibrary),
    ),
...
],
...

[xfuturomax]

UPD: when I use source-map-explorer tool, it show correct size, maybe the problem is how I use webpack-bundle-analyzer:

if I remove checkbox Show content of concatenated modules in analyzer UI:

🤔