Make FontAwesomeIconProps exportable

[michaelcozzolino]

Currently in index.d.ts FontAwesomeIconProps is not exported. I cannot build a wrapper using some or all of the props. is it possible to have it exported?

[jasonlundien]

Hi @michaelcozzolino ---

Can you give an example of what you are trying to do and/or how you would use this?

[michaelcozzolino]

@jasonlundien
I have the following component and i would like to use the FontAwesomeIconProps in this way:

<template>
    <font-awesome-icon :icon="['fas', 'circle-chevron-left']" :size="size"  />
</template>

<script setup lang="ts">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

interface Props extends Pick<FontAwesomeIconProps, 'size'>{

}

defineProps<Props>();
</script>

[jasonlundien]

@michaelcozzolino ---

Fix is in new release (3.0.6). Added you as a contribute for this as well, thanks for the headsup, patience, and support !!!

Let us know if anything else pops up.
-jason

[dmke]

Hm. I've now got the following error:

srv/components/FaIcon.ts:1:15 - error TS2724: '"@fortawesome/vue-fontawesome"' has no exported member named 'FontAwesomeIconProps'. Did you mean 'FontAwesomeIcon'?

1 import type { FontAwesomeIconProps } from "@fortawesome/vue-fontawesome"
                ~~~~~~~~~~~~~~~~~~~~

With v3.0.5, this had worked. That doesn't make much sense, as you just added the exports to 3.0.6.

Maybe TypeScript implicitly exports all interfaces from .d.ts files, when there's no explicit export?

[dmke]

This seems to explain it: microsoft/TypeScript#38592 (comment). @jasonlundien, would you mind adding some additional exports?

-interface FontAwesomeIconProps {
+export interface FontAwesomeIconProps {
 ...
-interface FontAwesomeLayersProps {
+export interface FontAwesomeLayersProps {
 ...
-interface FontAwesomeLayersTextProps {
+export interface FontAwesomeLayersTextProps {
 ...

[michaelcozzolino]

@jasonlundien 5ce88a7#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8R47
shoudlnn't the export be FontAwesomeIconProps instead of FontAwesomeIcon and so on?

[jasonlundien]

Hey @dmke ---

Can you give us an example of what you are doing / how you are using it when you see the error above ?

[dmke]

@jasonlundien, sure:

I've got a helper method to condense <FontAwesomeIcon :icon="['far', 'user']" /> to something like <FaRegular icon="user" />. This reduces the amount of special characters needed to get a user icon :)

The code looks like this:

FaIcon.ts

import type { FontAwesomeIconProps } from "@fortawesome/vue-fontawesome"
import type { DefineComponent } from "vue"
import { defineComponent, h, resolveComponent } from "vue"

interface CustomFAIconProps extends FontAwesomeIconProps {
  icon: string
}

export function createFaWrapper(name: string, style: string): DefineComponent<CustomFAIconProps> {
  return defineComponent({
    compatConfig: { MODE: 3 },
    name,

    // FontAwesomeIcon accepts string[] and object as well. We don't.
    props: {
      icon: { type: String, required: true },
    },

    render() {
      return h(resolveComponent("FontAwesomeIcon"), {
        icon: [style, this.icon],
      })
    },
  })
}

entrypoint.ts

import { createApp } from "vue"
import { createFaWrapper } from "./FaIcon"

const app = createApp()
app.component("FaRegular", createFaWrapper("FaRegular", "far"))
app.component("FaSolid", createFaWrapper("FaSolid", "fas"))

[Sn0wCrack]

Facing the same issue currently. Previously I was able to import everything from the index.d.ts file, however now I'm unable to import anything that is not present in the export definition.

I was able to work around this by getting the type of the props using the following TypeScript magic:

InstanceType<typeof FontAwesomeIcon>['$props']

However this is far from ideal.

[jasonlundien]

This should be good now, FontAwesomeIconProps is now being exported from index.d.ts in release 3.0.8.

Let us know if anything else pops up.
Thank you,
-jason

[dmke]

Can confirm, 3.0.8 exports FontAwesomeIconProps. Thank you!