So I have this code:
import * as Icons from "../../icons"
const Icon = ({ icon, ...props }) => {
const Icon = Icons[icon]
return <Icon {...props} />
}
and I am trying to find the correct types for it but no matter what I do, it won´t work. Pls HELP
Declare an interface for the Icons import by import * as Icons from './icons' statement.
./icons/SquareIcon.tsx:
import React from 'react';
export default function SquareIcon() {
return <div>square icon</div>;
}
./icons/CycleIcon.tsx:
import React from 'react';
export default function CycleIcon() {
return <div>cycle icon</div>;
}
./icons/index.ts:
import CycleIcon from './CycleIcon';
import SquareIcon from './SquareIcon';
export interface IconType {
cycle: typeof CycleIcon;
square: typeof SquareIcon;
}
export { CycleIcon as cycle, SquareIcon as square };
Icon.tsx:
import React from 'react';
import * as Icons from './icons';
import type { IconType } from './icons';
const Icon = ({ icon, ...props }: { icon: keyof IconType }) => {
const Icon = Icons[icon];
return <Icon {...props} />;
};
function Test() {
return <Icon icon="cycle"></Icon>;
}
Specify the data types as follows,
const Icon = ({ icon , ...props } : {icon : string , props : any}) => {
const Icon = Icons[icon]
return <Icon {...props} />
}
If the data has only one type you can use the proper data type without using any.
