I've built a component that use next/dynamic to import react-icons when necessary, but I cannot find a correct way of defining typescript type for this component. The component in itself works.
Here is a link to codesandbox with typescript: https://codesandbox.io/s/nextjs-dynamic-import-with-react-icons-zk1kz9
The code:
import dynamic from "next/dynamic";
const DynamicIcon = ({
iconFamily,
icon,
...rest
}: {
iconFamily: keyof typeof Icons;
icon: string;
}) => {
const Icons = {
ci: dynamic(() => import("react-icons/ci").then((mod) => mod[icon])),
fa: dynamic(() => import("react-icons/fa").then((mod) => mod[icon])),
io: dynamic(() => import("react-icons/io").then((mod) => mod[icon])),
io5: dynamic(() => import("react-icons/io5").then((mod) => mod[icon])),
md: dynamic(() => import("react-icons/md").then((mod) => mod[icon])),
ti: dynamic(() => import("react-icons/ti").then((mod) => mod[icon])),
go: dynamic(() => import("react-icons/go").then((mod) => mod[icon])),
fi: dynamic(() => import("react-icons/fi").then((mod) => mod[icon])),
gi: dynamic(() => import("react-icons/gi").then((mod) => mod[icon])),
wi: dynamic(() => import("react-icons/wi").then((mod) => mod[icon])),
di: dynamic(() => import("react-icons/di").then((mod) => mod[icon])),
ai: dynamic(() => import("react-icons/ai").then((mod) => mod[icon])),
bs: dynamic(() => import("react-icons/bs").then((mod) => mod[icon])),
ri: dynamic(() => import("react-icons/ri").then((mod) => mod[icon])),
fc: dynamic(() => import("react-icons/fc").then((mod) => mod[icon])),
gr: dynamic(() => import("react-icons/gr").then((mod) => mod[icon])),
hi: dynamic(() => import("react-icons/hi").then((mod) => mod[icon])),
hi2: dynamic(() => import("react-icons/hi2").then((mod) => mod[icon])),
si: dynamic(() => import("react-icons/si").then((mod) => mod[icon])),
sl: dynamic(() => import("react-icons/sl").then((mod) => mod[icon])),
im: dynamic(() => import("react-icons/im").then((mod) => mod[icon])),
bi: dynamic(() => import("react-icons/bi").then((mod) => mod[icon])),
cg: dynamic(() => import("react-icons/cg").then((mod) => mod[icon])),
vsc: dynamic(() => import("react-icons/vsc").then((mod) => mod[icon])),
tb: dynamic(() => import("react-icons/tb").then((mod) => mod[icon])),
tfi: dynamic(() => import("react-icons/tfi").then((mod) => mod[icon]))
};
const Icon = iconFamily && icon ? Icons[iconFamily] : null;
if (!Icon) return <></>;
return (
<>
<Icon {...rest} />
</>
);
};
export default DynamicIcon;
The error:
./components/DynamicIcon.tsx:12:17
Type error: Argument of type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to parameter of type 'DynamicOptions<IconBaseProps> | Loader<IconBaseProps>'.
Type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type '() => LoaderComponent<IconBaseProps>'.
Type 'Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type 'LoaderComponent<IconBaseProps>'.
Type 'typeof import("/sandbox/node_modules/react-icons/ci/index") |IconType | undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
Type 'undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
I tried multiple way of defining type (string, keyof typeof IconType etc)
I think the issue is you are returning Promise
here.
ci: dynamic(async () => {
const mod=await import("react-icons/ci")
return mod[icon]
)
})
Also you are passing icon
as string but this string value should be a value that react-library
exports. Maybe you should define an Enum for icon
type
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.