Reputation: 1798
I want to pass an Icon as a Prop to my TextInput Component like this:
export interface TextInputProps {
leadingIcon?: (props: React.ComponentProps<'svg'>) => JSX.Element
}
export const TextInputField = forwardRef<HTMLInputElement, InputFieldProps>({ leadingIcon, ...props }, ref) => {
const LeadingIcon = leadingIcon
return (
<div className="flex">
{leadingIcon ? (
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-one">
<LeadingIcon className="h-5 w-5 text-gray-400" />
</div>
) : null}
<input {...input} {...props} ref={ref} className="block w-full shadow-sm" />
</div>
)
}
and i want to use it like this
<TextInputField leadingIcon={MailIcon} />
but i always get the typescript error:
JSX element type 'LeadingIcon' does not have any construct or call signatures .ts(2604)
What do i need to change to get this working?
Upvotes: 3
Views: 3769