sanity-typed icon indicating copy to clipboard operation
sanity-typed copied to clipboard

Icon field in defineType type error

Open gercordero opened this issue 9 months ago • 0 comments

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

gercordero avatar Apr 30 '24 01:04 gercordero