React-fontawesome: Make it possible to use variables inside icon prop

[A-H-Pooladvand]

Using react 16 with typescript
Here is my render method, the problem is that I want to use FontAwesomeIcon component inside a loop and feed it with variable but I get Type 'string' is not assignable to type 'IconProp'
What can I do?

render () {
    return (
      <div className='sidebar'>
        <ul>
          {
            this.menus.map(menu => {
              return (
                <li key={menu.id}>
                  <Button className='btn-link' ref={this.element} onClick={() => this.handleClick(menu.id)}>
                    <FontAwesomeIcon icon={menu.icon} className='fixed-width'/>
                    {menu.title}
                  </Button>
                  <ul>
                    {
                      menu.sub
                        ? menu.sub.map(subMenu => <li key={subMenu.id}><a href="#">{subMenu.title}</a</li>)
                        : null
                    }
                  </ul>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }

[jacobsowles]

I haven't tested this, but you may be able to do something like icon={menu.icon as IconName}. An IconProp is just IconName | [IconPrefix, IconName] | IconLookup, and an IconName is just a string, so it might work.

Also double-check that menu.icon matches a string that's in the list of available icon names (see the IconName interface in /node_modules/@fortawesome/fontawesome-common-types/index.d.ts).

[A-H-Pooladvand]

I tried icon={menu.icon as IconName}, still not working. it throws Cannot find name 'IconName'.
I double checked my icon names, nothing wrong with them.
FontAwesomeIcon component works fine if I explicitly use the string inside the icon prop.

[jacobsowles]

You'll need to add import { IconName } from '@fortawesome/fontawesome-svg-core'; to get access to the IconName type.

[A-H-Pooladvand]

I have misunderstood your answer, yes it works but I was kinda hoping to add my icons to library and free myself to import them every time or even get them through an API.
anyways I think you should fix it somehow.
Thanks.

[jacobsowles]

I agree, an update to get around this issue would be nice. In the meantime, you could create a wrapper component for the FontAwesomeIcon component. Something like this. (Again, not tested, but something to try out.)

import React from 'react';
import { IconName } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const Icon: React.FunctionComponent = ({ icon, ...rest }) => {
  return <FontAwesomeIcon icon={icon as IconName} {...rest} />
};

export default Icon;

That way you can just use your Icon component just like you'd use the FontAwesomeIcon component, and it saves you from having to import IconName all over the place.

[robmadole]

What would the fix be exactly? I'm now sure I see where this is broken or not working as expected. Are you asking that the IconProp also be typed as just a string?

[A-H-Pooladvand]

Yes, I know that is not really ideal for the type hints... but I want to make a dynamic navigation menu and I'm getting them from an api so that would be nice if it accept string too.

[robmadole]

@A-H-Pooladvand I don't think there is anything that react-fontawesome or @fortawesome/fontawesome-svg-core can do to help this out. I believe the changes are going to have to happen in wherever your menu is coming from. You iterate through this.menu and the icon prop needs to be typed to IconProp. Maybe I'm missing something (we don't use TypeScript a whole lot yet).