icons
icons copied to clipboard
How to Dynamically import Icon and support of Default Export
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 ?