Typescript and custom icon packs

[tastypackets]

Describe the bug Typescript error on IconName and IconPrefix type when using custom icon pack. Initial thought is would adding string to IconPrefix and IconName fix this for custom icon packs?

For example say we have a custom icon pack added that has a prefix of coolIcons and inside it is an icon named cool-icon. After adding this library and trying to render <Icon icon={["coolIcons", "cool-icon"]} /> TS will show an error that coolIcons is not one of IconPrefix which is "fas" | "fab" | "far" | "fal" | "fad" and that IconName is not in the type IconName.

Perhaps there is something I'm misusing / doing wrong with TS for this component though. 🤞

To Reproduce

import { library } from "@fortawesome/fontawesome-svg-core";
import { coolIcons} from "./library";

library.add(coolIcons);

Expected behavior Passing a string for my custom dictionary shouldn't cause a TS error.

Screenshots

Version and implementation Version: 0.1.15

Bug report checklist

• [x] I have filled out as much of the above information as I can
• [x] I have included a test case because my odds go way up that the team can fix this when I do
• [x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tastypackets]

For ref talking about these types: https://github.com/FortAwesome/Font-Awesome/blob/master/js-packages/%40fortawesome/fontawesome-common-types/index.d.ts#L1

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

[sorahn]

I just ran into this bug. I just figured I'd post my work around for you or anyone else coming this way.

// customIcons.ts
export const customIcon = {
  prefix: 'custom' as IconPrefix,  // optional, just use one of the existing prefixes, we're not gonna use this anyway.
  iconName: 'myCustomIcon' as IconName,
  icon: [
    // ... svg numbers
  ]
} as IconDefinition


// Foo.tsx
import { customIcon } from './customIcons'

<FontAwesomeIcon icon={customIcon} />