Closed JPortegijs closed 3 years ago
@JPortegijs I ran into same issue. how did you solve this?
You could import the entire module as an object and use the icon names to lookup its exports:
import * as icons from "@heroicons/react/solid";
const ComponentWithIcon: React.FC<{ iconName: keyof typeof icons }> = (props) => {
const Icon = icons[props.iconName];
return (
<div>
<Icon className="w-5 h-5" />
<span>{props.iconName}</span>
</div>
);
};
Full example here: https://codesandbox.io/s/tailwindlabsheroicons262-lw2gr
Although, be carful here since you may loose tree-shaking by doing so. I recommend you explicitly re-export the icons you need from another file (import * as icons from '../path/to/icons'
). This way you have control over the icons that ends up included in the bundle.
I have a react Navigation component, where I loop over routes, each route has a icon property. How would I use the icon in the map?
This would be the array of the routes:
And this is what the component returns:
Any help is appreciated!
Thanks in advance.