Add icon name prop

[ffpetrovic]

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.

[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 />

[SeanMcP]

@Kosai106 I've created a component like that in every project where I've used react-feather. I agree with @ffpetrovic that baking that into the library would be a good idea.

[Kosai106]

I just realised that my method wouldn't work if you're using TypeScript anyway.

Element implicitly has an 'any' type because type 'typeof import("/Users/oesterkilde/projects/[PROJECT-NAME]/node_modules/react-feather/dist/index")' has no index signature

[LukyVj]

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 />

Thanks for the suggestion @Kosai106, this solved my issue :)

[agustingabiola]

I know this is a bit old but in case anyone needs it I managed to create a component that lazy loads the icons based on the name (you'll need to use lowercase) and works with Typescript:

interface DpFeatherIconProps {
  icon: string;
}

export default (props: DpFeatherIconProps) => {
  const IconTag = React.lazy(() => import(`react-feather/dist/icons/${props.icon}.js`));

  return (
    <Suspense fallback={null}>
      <IconTag />
    </Suspense>
  );
};

[kungpaogao]

@agustingabiola Thank you for this workaround. However, the use of lazy/Suspense seems to cause some "blinking" on some loads. Are there any other workarounds?

This is what I've done to prevent layouts from jumping around as much:

<Suspense
  fallback={
    <Loader
      color="white"
      className={props.className}
      size={props.size || 12}
    />
  }
>
...
</Suspense>

[Kosai106]

@kungpaogao For the fallback, just use an empty div with the same dimensions as your icon - This should prevent any layout shifting.

[kungpaogao]

@Kosai106 yup, that’s what I’m doing already, but it doesn’t solve the “blinking” that happens when the icon is loaded

[agustingabiola]

@Kosai106 yup, that’s what I’m doing already, but it doesn’t solve the “blinking” that happens when the icon is loaded

@kungpaogao Use memo for the component alongside with an element with the same dimensions for fallback. For example if you have a blue cross of 16px you can check that if all props are equal return the same rendered component

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

[kungpaogao]

@kraenhansen This is exactly what I'm looking for! Thank you!

[osvaldokalvaitir]

It would be very interesting to be able to pass on the name as property.

[LukyVj]

Hello 👋

Nice solution from @kraenhansen, however, using this on next@10 & TypeScript result with the following error:

Server Error
Error: Element type is invalid: expected a string (for built-in components) 
or a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in, 
or you might have mixed up default and named imports.

If anyone got a clue or a solution for this.

Below, my current files:

Icon/Icon.tsx

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

And where I use the icon:

import { Icon } from "../Icon/Icon";

...
...
...
{icon && <Icon name={icon} />}

From what I understand, the exports/imports seems to be wrong somehow, I've tried several ways to fix this but none works, any hint would be appreciated 😄

[Kosai106]

@LukyVj It works just fine in Next.js from what I can tell.
https://codesandbox.io/s/hopeful-franklin-xr1fe?file=/src/pages/index.tsx

From the error message you're sharing it seems to come from somewhere else.

[LukyVj]

@LukyVj It works just fine in Next.js from what I can tell.
codesandbox.io/s/hopeful-franklin-xr1fe?file=/src/pages/index.tsx

From the error message you're sharing it seems to come from somewhere else.

Thanks for answering!

So, yeah, I've tried your code, works well when I pass the name directly as a string Icon name="box" works just fine.

But, when I tried to pass it through a prop, it doesn't work, e.g:

Where I define the needed icon

  <Button
        onClick={() => {
          toggleOpen(!open);
        }}
        primary
        className="mb-16"
        icon="Box"
      />

The button code:

{icon && <Icon name={icon} />}

So, I've somehow understood why this doesn't work based on your comment, turns out my component get rendered several times including one where the icon is undefined, I suppose that's what's causing the error :D

[davidperklin]

@LukyVj It works just fine in Next.js from what I can tell.
codesandbox.io/s/hopeful-franklin-xr1fe?file=/src/pages/index.tsx
From the error message you're sharing it seems to come from somewhere else.

Thanks for answering!

So, yeah, I've tried your code, works well when I pass the name directly as a string Icon name="box" works just fine.

But, when I tried to pass it through a prop, it doesn't work, e.g:

Where I define the needed icon

  <Button
        onClick={() => {
          toggleOpen(!open);
        }}
        primary
        className="mb-16"
        icon="Box"
      />

The button code:

{icon && <Icon name={icon} />}

So, I've somehow understood why this doesn't work based on your comment, turns out my component get rendered several times including one where the icon is undefined, I suppose that's what's causing the error :D

Have you figured out a solution for this?

[GCobo]

@kraenhansen thanks!!

[lawnchamp]

@kraenhansen doesn't that solution have the problem of all 280 icons being included into your webpack bundle so that you can pick components dynamically? Tree shaking wouldn't be able to work in this case right?

[BenSampo]

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

I have modified as follows, in case it's useful to anyone.

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

export type IconName = keyof typeof Icons;

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

const Icon: React.FC<IconProps> = ({ name, ...rest }) => {
    const IconComponent = Icons[name];
    return <IconComponent {...rest} />;
};

export default Icon;

Usage is <Icon name="Download" />