How to Dynamically import Icon and support of Default Export

[Dey-Sumit]

UseCase : I am building a no code tool where user selects one icon from the edit page and in the final page they can see the icon and other text.
Now, in the final page, I only want to import that specific icon by name that is selected by the user . I am thinking about creating a custom component like this?

// components/LazyIcon.tsx
import React from 'react';
import dynamic from 'next/dynamic';

interface LazyIconProps {
  iconName: string;
}

const LazyIcon: React.FC<LazyIconProps> = ({ iconName }) => {
  let IconComponent: React.ComponentType | null = null;

  switch (iconName) {
    case 'AccessibilityIcon':
      IconComponent = dynamic(() => import('@radix-ui/react-icons/AccessibilityIcon'), { ssr: false });
      break;
    case 'ActivityLogIcon':
      IconComponent = dynamic(() => import('@radix-ui/react-icons/ActivityLogIcon'), { ssr: false });
      break;
    case 'AirplaneIcon':
      IconComponent = dynamic(() => import('@radix-ui/react-icons/AirplaneIcon'), { ssr: false });
      break;
    // Add other cases here
    default:
      break;
  }

  if (!IconComponent) {
    return <span>Icon not found</span>;
  }

  return <IconComponent />;
};

export default LazyIcon;

<LazyIcon iconName=""/>

I believe this will reduce the bundle size and will only import the needed Icon .

Problem : radix icons do not have a default export , So, this is not possible . import('@radix-ui/react-icons/AccessibilityIcon') How can I do this?

Is there actually any way to import a specific icon dynamically from the library, instead of importing the entire icon set ?

[magicspon]

I don't think you can call dynamic from within a component

From the docs :

Good to know: In import('path/to/component'), the path must be explicitly written. It can't be a template string nor a variable. Furthermore the import() has to be inside the dynamic() call for Next.js to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering. dynamic() can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to React.lazy.