Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
incompl opened this issue Jun 26, 2020 · 3 comments

Comments

@incompl
Copy link

incompl commented Jun 26, 2020

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 />
...
@incompl
Copy link
Author

incompl commented Jun 26, 2020

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 :)

@kungpaogao
Copy link

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

@longseespace
Copy link

longseespace commented Aug 24, 2020

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;
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants