svg can be passed to layer as menu icon

src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import DynamicHeroIcon from '../../../Utils/DynamicHeroIcon'
 import { useLayers } from '../hooks/useLayers'
 import { useHasUserPermission } from '../hooks/usePermissions';
 
@@ -37,7 +36,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 type='solid' icon={layer.menuIcon} />
+                                        <layer.menuIcon className="tw-h-6 tw-w-6 tw-text-white" ></layer.menuIcon>
                                     </button>
                                 </div>
                             </a>

src/Utils/DynamicHeroIcon.tsx

@@ -1,26 +0,0 @@
-// DynamicHeroIcon.tsx
-// Simple Dynamic HeroIcons Component for React (typescript / tsx)
-// 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, type?: "solid" | "outline", className?: string}> = (props) => {
-  const {...icons} = HIcons
-  
-  const TheIcon: JSX.Element = icons[props.icon]
-
-  if(!TheIcon) {
-    console.log(`Icon ${props.icon} doesn't exist`);
-  } 
-
-  return (
-    <>
-      {/* @ts-ignore */}
-      <TheIcon className={props.className? props.className : "tw-h-6 tw-w-6 tw-text-white" }aria-hidden="true" /> 
-    </>
-  )
-}
-
-export default DynamicHeroIcon

src/types.ts

@@ -14,7 +14,7 @@ export interface LayerProps {
   data?: Item[],
   children?: React.ReactNode,
   name: string,
-  menuIcon: string,
+  menuIcon: any,
   menuColor: string,
   menuText: string,
   markerIcon: string,