I copied the code from mosh’s repo. I made sure my package.json have the same versions of everything. I get the following error when passing a react icon to the chakra Icon component.
Type (props: IconBaseProps) => JSX.Element is not assignable to type AsComponent | undefined
"@chakra-ui/react": "2.5.1",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"axios": "^1.4.0",
"framer-motion": "^10.12.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.8.0"
import { FaAndroid, FaApple, FaLinux, FaPlaystation, FaWindows, FaXbox } from "react-icons/fa"
import { MdPhoneIphone } from "react-icons/md"
import { SiNintendo } from "react-icons/si"
import { BsGlobe } from "react-icons/bs"
import { Platform } from "../hooks/use-games"
import { IconType } from "react-icons"
import { HStack, Icon } from "@chakra-ui/react"
interface Props {
platforms: Platform[]
}
export const PlatformIconList = ({ platforms = [] }: Props) => {
const iconMap: { [key: string]: IconType } = {
pc: FaWindows,
playstation: FaPlaystation,
xbox: FaXbox,
nintendo: SiNintendo,
mac: FaApple,
linux: FaLinux,
android: FaAndroid,
ios: MdPhoneIphone,
web: BsGlobe
}
return (
<HStack marginY={1}>
{platforms.map((platform) => (
// The error is on the `iconMap[platform.slug]
return <Icon key={platform.id} as={iconMap[platform.slug]} color='gray.500'/>
))}
</HStack>
);
};