sanity-typed
sanity-typed copied to clipboard
Icon field in defineType type error
Hello, I'm following Sanity's docs for adding an icon to a Document and I'm getting a type error when trying to do so. The icon is rendering fine on Sanity's studio so I guess this is purely a wrong type definition error:
My code:
import { DocumentTextIcon } from '@sanity/icons';
import { defineField, defineType } from '@sanity-typed/types';
export const blog = defineType({
name: 'blog',
type: 'document',
title: 'Blog',
icon: DocumentTextIcon, // <-- Error here
fields: [
defineField({
name: 'title',
type: 'string',
title: 'Title of blog article',
}),
...
],
});
Typescript error:
Type 'ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>' is not assignable to type 'ComponentType | ReactNode'.
Type 'ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>' is not assignable to type 'FunctionComponent<{}>'.
Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2322)
I've tried doing icon: DocumentTextIcon as unknown as ReactNode
which is not ideal but it doesn't work either as I'm getting this other error:
Type 'ReactNode' is not assignable to type 'ComponentType | ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ComponentType | ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2322)
And yes, I've also tried doing icon: DocumentTextIcon as unknown as ComponentType | ReactNode
and it doesn't work as well.
https://www.sanity.io/docs/icons-for-data-types