'XXIcon' cannot be used as a JSX component (Vue)

[TiBianMod]

If you create a TSX Component and try to use any icon you will receive a nice TypeScript error...

TS2786: 'BeakerIcon' cannot be used as a JSX component.  
Its return type 'VNodeChild' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.

The issue is that icons are declared as RenderFunction and the return type of the RenderFunction is VNodeChild and VNodeChild is not a valid JSX element.

// From runtime-core.d.ts
export declare type RenderFunction = () => VNodeChild;

I know we have already two pull request (#322 and #549) about this issue, but with tsx files I had the same issue allways !!!

Let's use the generated code from the Beaker Icon to test the types from the two pull requests (#322 and #549)

Let's test RenderFunction type

you can see the type is not compatible.

Let's test DefineComponent type

you can see again the type is not compatible.

Let's test FunctionalComponent type

and you can see the type is compatible and vue-tsc reports no errors.

I'm preparing a pull request to solve this issue.

[TiBianMod]

@bradlc can you have a look on the issue please.

Simply create a MyComponent.tsx file and you will see the error immediately.

import { BeakerIcon } from '@heroicons/vue/solid'

export default function MyComponent() {
    return <BeakerIcon />
}