1

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

JkAlombro
  • 1,696
  • 1
  • 16
  • 30

1 Answers1

0

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

user106378
  • 1