antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

dynamic import in DynamicHeroIcon

Browse Source
This commit is contained in:
Anton 2023-09-16 11:38:38 +02:00
parent 519614cabc
commit a6cb2061d8
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -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" 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 }} style={{ backgroundColor: layer.menuColor }}
onClick={() => { setSelectNewItemPosition(layer) }}> onClick={() => { setSelectNewItemPosition(layer) }}>
<DynamicHeroIcon icon={layer.menuIcon} /> <DynamicHeroIcon type='solid' icon={layer.menuIcon} />
</button> </button>
</div> </div>
</a> </a>

33
src/Utils/DynamicHeroIcon.tsx
View File

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