type error while attempting to add custom icon to library

[josh-m-sharpe]

Describe the problem

I'm attempting to add my own custom icon to my library using something like this: https://codepen.io/fontawesome/pen/pZWXYX

I can't seem to get around this type error:

Type '(string | number | any[])[]' is missing the following properties from type '[number, number, string[], string, IconPathData]': 0, 1, 2, 3, 4

What did you expect?

No error. Icon added to library.

Reproducible test case

Unfortunately, I can't reproduce this on stackblitz - here's a working example: https://stackblitz.com/edit/angular-z8v4ux-uxzasj. I updated angular/typescript/fortawesome packages to match what I have, but there are some others that stack blitz wouldn't install.

Below is the code from my app, which as best as I can tell is functionally the same as whats on that stackblitz case.

var prefix = 'far';
var iconName = 'myicon';
var width = 512;
var height = 512;
var ligatures = [];
var unicode = 'f20a';
var svgPathData = 'M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 336H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v276c0 3.3-2.7 6-6 6zm-211.1-85.7c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.8-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7l-17.5 30.5c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6 2.8-2.5 7.1-2.1 9.2.9l19.6 27.7zm190.4 0c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.9-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7L420 220.2c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6 2.8-2.5 7.1-2.1 9.2.9l19.6 27.7z';

var myIconDefinition = {
  prefix: prefix,
  iconName: iconName,
  icon: [
    width,
    height,
    ligatures,
    unicode,
    svgPathData
  ]};

export class YsFontAwesomeIconsModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(
      myIconDefinition,
    );
  }
}

...and the type error I can't get around:

[ng]     ERROR in src/app/modules/ys-font-awesome-icons/ys-font-awesome-icons.module.ts:43:7 - error TS2345: Argument of type '{ prefix: string; iconName: string; icon: (string | number | any[])[]; }' is not assignable to parameter of type 'IconDefinition'.
[ng]       Types of property 'icon' are incompatible.
[ng]         Type '(string | number | any[])[]' is missing the following properties from type '[number, number, string[], string, IconPathData]': 0, 1, 2, 3, 4
[ng]
[ng]     43       myIconDefinition,

So, it's balking at the icon attribute:

  icon: [
    width,
    height,
    ligatures,
    unicode,
    svgPathData
  ]

which is basically this:

var myIconDefinition = {
  prefix: prefix,
  iconName: iconName,
  icon: [
    512,
    512,
    [] as string[],
    'f20a',
    'M464 64H48C21.5'
  ]
};

And that looks a heck of a lot like the definition: https://github.com/FortAwesome/Font-Awesome/blob/master/js-packages/%40fortawesome/fontawesome-common-types/index.d.ts#L10-L18

So, not sure why typescript is throwing an error here.

[josh-m-sharpe]

Unrelated, but maybe related - it might be a good idea to actually define that icon attribute as a real Type in a future refactoring. (string | number | any[])[] has room for improvement :)

[josh-m-sharpe]

Possibly related, it seems I can't even create a IconDefinition without throwing a type error:

import { IconDefinition } from '@fortawesome/fontawesome-common-types';
var myIconDefinition: IconDefinition = {
  prefix: 'far',
  iconName: 'myicon',
  icon: [
    512,
    512,
    [] as string[],
    'f20a',
    'M464 64H48C21.5'
  ]
};

[ng]     ERROR in src/app/modules/ys-font-awesome-icons/ys-font-awesome-icons.module.ts:22:3 - error TS2322: Type '"myicon"' is not assignable to type 'IconName'.
[ng]
[ng]     22   iconName: 'myicon',
[ng]          ~~~~~~~~
[ng]
[ng]       node_modules/@fortawesome/fontawesome-common-types/index.d.ts:7:3
[ng]         7   iconName: IconName;
[ng]             ~~~~~~~~
[ng]         The expected type comes from property 'iconName' which is declared here on type 'IconDefinition'

I guess because IconName is already a defined list?

https://github.com/FortAwesome/Font-Awesome/blob/master/js-packages/%40fortawesome/fontawesome-common-types/index.d.ts#L24

[josh-m-sharpe]

eh, just found this - https://github.com/FortAwesome/angular-fontawesome/issues/172 seems related.

Is there any workaround?

[devoto13]

The example from https://github.com/FortAwesome/angular-fontawesome/issues/172#issuecomment-620873482 should work, doesn't it?

[josh-m-sharpe]

Ah - that does seem to work. Much appreciated!