react-feather
react-feather copied to clipboard
Feature request: A way to get an icon based on the lowercase-dashed-format
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 />
...
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 :)
How did you implement Icon.get(...)
?
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;
};