Add icon name prop

Does it not make sense to have a reusable icon component of our own that utilizes react-feather, and therefore be able to do something like <Icon icon={this.props.icon} />?

I’m aware that we can always pass an icon like <Camera /> down as a prop, but I’m wondering if it’s possible to this just by the name of the icon.

[kraenhansen]

For anyone interested, I just wrote this functional component which will render an icon by name (in TypeScript):

import React from "react";
import * as icons from "react-feather";

export type IconName = keyof typeof icons;

export type IconProps = {
  name: IconName;
} & icons.Props;

export function Icon({ name, ...rest }: IconProps) {
  const IconComponent = icons[name];
  return <IconComponent {...rest} />;
}

[Kosai106]

You could always abstract this kind of behavour, but otherwise doing the following would allow you a similar experience (Almost).

const IconTag = Icon[this.props.icon];

<IconTag />