dynamic import in DynamicHeroIcon

src/Components/Map/Subcomponents/AddButton.tsx

@@ -27,7 +27,7 @@ export default function AddButton({ setSelectNewItemPosition }: { setSelectNewIt
                                         className="tw-z-500  tw-border-0 tw-pl-2 tw-p-0 tw-mb-3 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none"
                                         style={{ backgroundColor: layer.menuColor }}
                                         onClick={() => { setSelectNewItemPosition(layer) }}>
-                                        <DynamicHeroIcon icon={layer.menuIcon} />
+                                        <DynamicHeroIcon type='solid' icon={layer.menuIcon} />
                                     </button>
                                 </div>
                             </a>

src/Utils/DynamicHeroIcon.tsx

@@ -3,24 +3,37 @@
 // by: Mike Summerfeldt (IT-MikeS - https://github.com/IT-MikeS)
 
 import { FC } from 'react'
-import * as HIcons from '@heroicons/react/20/solid'
 import * as React from 'react'
 
-const DynamicHeroIcon: FC<{icon: string}> = (props) => {
-  const {...icons} = HIcons
+const DynamicHeroIcon: FC<{icon: string, type: "solid" | "outline", className?: string}> = (props) => {
+
+  const [TheIcon, setTheIcon] = React.useState<JSX.Element>()
+
+  import(`@heroicons/react/24/solid`).then(i => {
+
+    const {...icons} = i    
   
-  const TheIcon: JSX.Element = icons[props.icon]
-
-  if(!TheIcon) {
-    console.log(`Icon ${props.icon} doesn't exist`);
-  } 
+    setTheIcon(icons[props.icon])
+    if(!TheIcon) {
+      console.log(`Icon ${props.icon} doesn't exist`);
+    } 
 
+  })
+  
+  if(TheIcon)
   return (
     <>
-      {/* @ts-ignore */}
-      <TheIcon className="tw-h-6 tw-w-6 tw-text-white" aria-hidden="true" /> 
+              {/* @ts-ignore */}
+              <TheIcon className={props.className? props.className : "tw-h-6 tw-w-6 tw-text-white" }aria-hidden="true" /> 
     </>
   )
+  else return(
+    <></>
+  )
+
+
+
+
 }
 
 export default DynamicHeroIcon