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 ?