Feature request: A way to get an icon based on the lowercase-dashed-format

[Greg Smith]

I am working on an application where we allow users to set an icon name. We'd refer them to https://feathericons.com/ and say we support any of those icon names. In this library, you get an element reference with PascalCase format, as is conventional for a React element. It'd be convenient to have a way to get a reference to a React element from a dashed-format name. Something like this:

import * as Icon from 'react-feather';

...
const MyIcon = Icon.get('alert-circle');
// <MyIcon /> is now the same as <AlertCircle />
...

[Greg Smith]

Here is the code I'm currently using to do this:

export function dashedToPascal(str: string): string {
  return str
    .split('-')
    .map((str: string): string => str[0].toUpperCase() + str.slice(1))
    .join('');
}

yes it needs error handling still :)

[Andrew Gao]

How did you implement Icon.get(...)?

[Daniel Nguyen]

How did you implement Icon.get(...)?

I use something like this:

const getIconComponent = (iconName) => {
  const iconComponentName = dashedToPascal(iconName);
  if (iconComponentName in Icon) {
    return Icon[iconComponentName];
  }

  return Icon.ExternalLink;
};