Where to Import IconName interface from React Fontawesome with Typescript

Question

I'm trying to use FontAwesomeIcon dynamically but i'm having trouble in providing the icon name. This is my sample usage.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

interface SampleProps {
  icon: string;
}

function SampleComponent(props: SampleProps) {
    return (
        <FontAwesomeIcon icon={['fas', props.icon ]} />
    )
}

It gives me this error

Type 'string' is not assignable to type 'IconName'.

Which can be solved if I declare my icon in my interface as IconName but I can't find it on the font-awesome library

Answer 1

I just did this. I had to give the interface to the functional component

interface FoldersSidebarChannelProps {
    spaceID: number,
    folderIcon: any
}

const FoldersSidebarChannel: React.FC<FoldersSidebarChannelProps> =({spaceID,folderIcon}) => {

}

I ended up dropping in the faFolder icon from a higher up

My Hierarchy is: Sidebar > SpacesSidebarChannel > FolderSideBarChannel

I dropped in the reference from Sidebar.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFolder } from '@fortawesome/free-solid-svg-icons';

Then I threaded this faFolder Prop into my FoldersSideBarChannel:

<FoldersSidebarChannel spaceID={space.id} folderIcon={props.folderIcon} />

Then I finally used it in the return

<>
            <div className="flex-row channel-index-name folder">
              <FontAwesomeIcon icon={folderIcon}/>
             <p>
                  {folder.name}
              </p>
            </div>
            </>

The only thing I'm not proud of is that I declared the interface Type of icon to "any" I'm still researching that