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');