fix(react): supporting ios and md props on icons (#20170)

packages/react/src/components/IonIcon.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { NavContext } from '../contexts/NavContext';
+
+import { IonicReactProps } from './IonicReactProps';
+import { IonIconInner } from './inner-proxies';
+import { createForwardRef, isPlatform } from './utils';
+import { deprecationWarning } from './utils/dev';
+
+interface IonIconProps {
+  ariaLabel?: string;
+  color?: string;
+  flipRtl?: boolean;
+  icon?: { ios: string; md: string; };
+  ios?: { ios: string; md: string; };
+  lazy?: boolean;
+  md?: { ios: string; md: string; };
+  mode?: 'ios' | 'md';
+  name?: string;
+  size?: string;
+  src?: string;
+}
+
+type InternalProps = IonIconProps & {
+  forwardedRef?: React.RefObject<HTMLIonIconElement>;
+};
+
+class IonIconContainer extends React.PureComponent<InternalProps> {
+
+  constructor(props: InternalProps) {
+    super(props);
+    if (this.props.name) {
+      deprecationWarning('icon-name', 'In Ionic React, you import icons from "ionicons/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.');
+    }
+  }
+
+  setIcon() {
+    const { icon, ios, md } = this.props;
+    if (ios || md) {
+      if (isPlatform('ios')) {
+        this.setState({
+          icon: ios ?? md ?? icon
+        });
+      } else if (isPlatform('android')) {
+        this.setState({
+          icon: md ?? ios ?? icon
+        });
+      }
+    } else {
+      this.setState({
+        icon
+      });
+    }
+  }
+
+  render() {
+    const { icon, ios, md, ...rest } = this.props;
+
+    let iconToUse: typeof icon;
+
+    if (ios || md) {
+      if (isPlatform('ios')) {
+        iconToUse = ios ?? md ?? icon;
+      } else if (isPlatform('android')) {
+        iconToUse = md ?? ios ?? icon;
+      }
+    } else {
+      iconToUse = icon;
+    }
+
+    return (
+      <IonIconInner ref={this.props.forwardedRef} icon={iconToUse} {...rest}>
+        {this.props.children}
+      </IonIconInner>
+    );
+  }
+
+  static get contextType() {
+    return NavContext;
+  }
+}
+
+export const IonIcon = createForwardRef<IonIconProps & IonicReactProps, HTMLIonIconElement>(IonIconContainer, 'IonIcon');

packages/react/src/components/index.ts

@@ -22,6 +22,7 @@ export { IonTabs } from './navigation/IonTabs';
 export { IonTabBar } from './navigation/IonTabBar';
 export { IonBackButton } from './navigation/IonBackButton';
 export { IonRouterOutlet } from './IonRouterOutlet';
+export { IonIcon } from './IonIcon';
 
 // Utils
 export { isPlatform, getPlatforms, getConfig } from './utils';

packages/react/src/components/inner-proxies.ts

@@ -1,7 +1,11 @@
 import { JSX } from '@ionic/core';
+import { JSX as IoniconsJSX } from 'ionicons';
 
 import { /*@__PURE__*/ createReactComponent } from './createComponent';
 
 export const IonTabBarInner = /*@__PURE__*/createReactComponent<JSX.IonTabBar, HTMLIonTabBarElement>('ion-tab-bar');
 export const IonBackButtonInner = /*@__PURE__*/createReactComponent<Omit<JSX.IonBackButton, 'icon'>, HTMLIonBackButtonElement>('ion-back-button');
 export const IonRouterOutletInner = /*@__PURE__*/createReactComponent<JSX.IonRouterOutlet, HTMLIonRouterOutletElement>('ion-router-outlet');
+
+// ionicons
+export const IonIconInner = /*@__PURE__*/createReactComponent<IoniconsJSX.IonIcon, HTMLIonIconElement>('ion-icon');

packages/react/src/components/proxies.ts

@@ -1,12 +1,8 @@
 import { JSX } from '@ionic/core';
-import { JSX as IoniconsJSX } from 'ionicons';
 
 import { createReactComponent } from './createComponent';
 import { HrefProps } from './hrefprops';
 
-// ionicons
-export const IonIcon = /*@__PURE__*/createReactComponent<IoniconsJSX.IonIcon, HTMLIonIconElement>('ion-icon');
-
 // ionic/core
 export const IonApp = /*@__PURE__*/createReactComponent<JSX.IonApp, HTMLIonAppElement>('ion-app');
 export const IonTab = /*@__PURE__*/createReactComponent<JSX.IonTab, HTMLIonTabElement>('ion-tab');