bug: IonIcons JSX not included in exported JSX namespace

[SimoneIrato]

Bug Report

Ionic version: [x] 4.x

Current behavior: When importing Ionic inside a React project (not Ionic React), IonIcons are working but JSX is not included in exported namespace

Expected behavior: When using <ion-icon> element proper JSX binding should be provided.

Steps to reproduce:

• Create any React boilerplate.
• Import @ionic/core
• Extend JSX namespace in react app to obtain access to HTML custom elements in jsx.
• Ide doesn't complain for any custom elements except for <ion-icon>

This is the snippets that fixes the behavior. I have pull request ready to be submitted

export namespace JSX {
    export interface IntrinsicElements extends IonicJSX.IntrinsicElements{}
}

Ionic info: Not using CLI

[elylucas]

Hi @SimoneIrato,

Could you help me understand your use case better? Is there a reason you aren't directly using ionic/react?

Thanks

[SimoneIrato]

Hi @elylucas,

We're currently building a web component library with Stenciljs that embeds also all Ionic components, and will be consumed in a monorepo by a set of webapps without specific framework requirements. At the moment we're using React for one of those apps but we don't want to get tied to a specific "framework". This way we can export all components and import their jsx type in case we need them.

If there's any info missing just ask 😄 Thanks

[edolix]

I have the same issue exporting a Stencil component with reactOutputTarget. My component uses Ionicons with:

import { backspace } from 'ionicons/icons'

<ion-icon slot="icon-only" icon={backspace}></ion-icon>

And the resulting React proxies have the error Namespace 'LocalJSX' has no exported member 'IonIcon'. here:

/* auto-generated react proxies */
// ...
export const IonIcon = /*@__PURE__*/createReactComponent<JSX.IonIcon, HTMLIonIconElement>('ion-icon');
// ...

@stencil/core : v1.8.4 @stencil/react-output-target : v0.0.3

@SimoneIrato did you found a solution?

[liamdebeasi]

Thanks for the issue! This was resolved in https://github.com/ionic-team/ionic-framework/pull/21788 and is available now in the latest version of Ionic.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.