Dynamic icons not possible?

[JipSterk]

in the old phosphor-react the following code made it possible to dynamically render an icon like so:

import Icon, { IconProps } from "phosphor-react";
import React, {
  FC,
  ForwardRefExoticComponent,
  InputHTMLAttributes,
  RefAttributes,
} from "react";

interface Props {
  leadingIcon?: keyof typeof Icon;
}

export const Input: FC<Props> = ({ leadingIcon }) => (
  <>
      {leadingIcon && (
        <div>
          {(
            Icon[leadingIcon] as ForwardRefExoticComponent<
              IconProps & RefAttributes<SVGSVGElement>
            >
          )?.({})}
        </div>
      )}
      <input {...props} />
  </>
);

but with @phosphor-icons/react this doesn't seem possible. when inspect the difference between the old en new codebase i noticed that in the legacy branch there was a BaseIcon Component but now This was deprecated in favor of IconBase this doesn't have the same desired behaviour. Am i missing something or is this not supported anymore?

[rektdeckard]

You can absolutely render dynamic icons with the current version, and it should behave the same. Here is your example working with @phosphor-icons/react.

We never exposed a default export, in 1.X or 2.X. So this line:

import Icon from "phosphor-react";

is not inherently valid code in either version. What is probably happening is the your bundler or compiler supports synthetic default imports (TypeScript exposes an option for this, allowSyntheticDefaultImports), and was creating a big object with all the named exports under the hood.

A more compatible way to do this is to simply import * as Phosphor from "@phosphor-icons/react";, and index into that object by name.

Also, note that we do provide an Icon type for icon components, so instead of constructing the type yourself, you can use ours:

import * as Phosphor from "@phosphor-icons/react";
...
Phosphor[leadingIcon] as Phosphor.Icon

[rektdeckard]

IconBase was in both versions, though its implementation is slightly different. This should make no difference here.

[rektdeckard]

Also, FWIW, this is a large library (~4MB minified) and I never recommend importing the whole thing. Another alternative is to use Suspense and some lazy imports to code split icons and only load them as needed:

const LazyIcon = ({ icon }: { icon: string }) => {
  const Icon = React.lazy<React.ComponentType<IconProps>>(() =>
    import(`@phosphor-icons/react/dist/icons/${icon}.es.js`)
  );

  return (
    <React.Suspense fallback={null}>
      <Icon size={24} weight="fill" />
    </React.Suspense>
  );
};

// In your component that uses a dynamic icon
<LazyIcon icon="Smiley" />

Then you can benefit from only loading code for the icons that are used, albeit at time of use.

[JipSterk]

Hi, thanks for the reply i've tried both solutions you provided. i don't use allowSyntheticDefaultImports in my project and vite doesn't support importing like this sadly, instead it throws this error. if you want to try it out my repository is public i don't have a branch pushed yet but i basically the code you provided in a folder here in called icon with an single file called index.tsx the storybook looks like the following:

import { Meta, StoryFn } from "@storybook/react";
import React from "react";
import { Input } from ".";

const meta: Meta = {
  title: "Input",
  component: Input,
};

export default meta;

const Template: StoryFn<typeof Input> = ({ ...args }) => (
  <div className="p-8 flex items-center justify-center bg-white">
    <Input {...args} />
  </div>
);

export const Basic = Template.bind({});

Basic.args = {
  type: "text",
  name: "basic",
  placeholder: "basic",
};


export const Icon = Template.bind({});

Icon.args = {
  type: "text",
  name: "icon",
  placeholder: "icon",
  leadingIcon: "Envelope",
};

i hope that can provide any context. if you need help setting up the repo or any other details im happy to provide these.

[rektdeckard]

Got the storybook running. Only change that's needed is import * as Phosphor from "@phosphor-icons/react";. As I said, the lib does not have a default export, only named exports. You want to treat it like it does, so you need to use the import * as syntax to construct one.

[rektdeckard]

If you want to do the LazyIcon thing with vite, you can do some magic with import.meta.glob to allow the icons to be code-split correctly and still be dynamic imports:

import { lazy, ComponentType, Suspense } from "react";
import { IconProps } from "@phosphor-icons/react";

const ICONS_PATH = "../../../node_modules/@phosphor-icons/react/dist/icons";
const ICON_EXTENSION = ".es.js";

const lazyIconMap = import.meta.glob(
  "../../../node_modules/@phosphor-icons/react/dist/icons/*.es.js"
);

type Props = IconProps & { icon: string };

const LazyIcon = ({ icon, ...iconProps }: Props) => {
  const Icon = lazy<ComponentType<IconProps>>(
    lazyIconMap[`${ICONS_PATH}/${icon}${ICON_EXTENSION}`]
  );

  return (
    <Suspense fallback={null}>
      <Icon {...iconProps} />
    </Suspense>
  );
};