Update Icon.tsx

pinterest · Oct 8, 2024 · fa727c4 · fa727c4
1 parent e67797e
commit fa727c4
Showing 1 changed file with 10 additions and 97 deletions.
diff --git a/packages/gestalt/src/Icon.tsx b/packages/gestalt/src/Icon.tsx
@@ -1,8 +1,5 @@
-import classnames from 'classnames';
-import styles from './Icon.css';
+import InternalIcon from './Icon/InternalIcon';
 import icons from './icons/index';
-import vrIcons from './icons-vr-theme/index';
-import useInExperiment from './useInExperiment';
 
 export type IconColor =
   | 'default'
@@ -65,39 +62,6 @@ type Props = {
 // @ts-expect-error - TS2322 - Type 'string[]' is not assignable to type 'readonly ("replace" | "search" | "link" | "text" | "dash" | "3D" | "3D-move" | "360" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | ... 317 more ... | "wave")[]'.
 const IconNames: ReadonlyArray<keyof typeof icons> = Object.keys(icons);
 
-const swapOnRtlIconNames: ReadonlyArray<keyof typeof icons> = ['list-numbered'];
-const flipOnRtlIconNames: ReadonlyArray<keyof typeof icons> = [
-  'ads-stats',
-  'ads-overview',
-  'arrow-back',
-  'arrow-circle-forward',
-  'arrow-end',
-  'arrow-forward',
-  'arrow-start',
-  'arrow-up-right',
-  'compose',
-  'chevron-small-left',
-  'chevron-small-right',
-  'chevron-left-circle',
-  'chevron-right-circle',
-  'directional-arrow-left',
-  'directional-arrow-right',
-  'flip-vertical',
-  'hand-pointing',
-  'indent',
-  'link',
-  'mute',
-  'outdent',
-  'reorder-images',
-  'send',
-  'sound',
-  'speech',
-  'speech-ellipsis',
-  'switch-account',
-  'text-size',
-  'visit',
-];
-
 /**
  * [Icons](https://gestalt.pinterest.systems/web/icon) are the symbolic representation of an action or information, providing visual context and improving usability.
  *
@@ -117,67 +81,16 @@ function Icon({
   inline = false,
   size = 16,
 }: Props) {
-  const cs = classnames(
-    // @ts-expect-error - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
-    flipOnRtlIconNames.includes(icon) && styles.rtlSupport,
-    styles[color],
-    styles.icon,
-    { [styles.iconBlock]: !inline },
-  );
-
-  /**
-   * Some RTL Icons, we need to swap to a completely new icon because they can't be flipped
-   * @param iconName
-   */
-  function getFinalIconName(iconName?: keyof typeof icons): keyof typeof icons | undefined {
-    if (!iconName) {
-      return undefined;
-    }
-
-    if (!swapOnRtlIconNames.includes(iconName)) return iconName;
-
-    // As a convention, text direction is defined in `dir` attribute of `html` tag of the document
-    const isRTL =
-      typeof document === 'undefined'
-        ? false
-        : document.querySelector('html')?.getAttribute('dir') === 'rtl';
-
-    // return the RTL version of the icon
-    if (isRTL && `${iconName}-rtl` in icons) {
-      return `${iconName}-rtl` as keyof typeof icons;
-    }
-    return iconName;
-  }
-
-  const isInExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_visualRefresh',
-    mwebExperimentName: 'web_gestalt_visualRefresh',
-  });
-
-  const iconToUse = getFinalIconName(icon);
-
-  const path =
-    (iconToUse && (isInExperiment ? vrIcons : icons)[iconToUse]) ||
-    /* eslint-disable-next-line no-underscore-dangle */
-    (dangerouslySetSvgPath && dangerouslySetSvgPath.__path) ||
-    undefined;
-
-  const ariaHidden = accessibilityLabel === '' ? true : null;
-
   return (
-    // @ts-expect-error - TS2322 - Type '{ children: Element; "aria-hidden": true | null; "aria-label": string; className: string; height: string | number; role: "img"; viewBox: string; width: string | number; }' is not assignable to type 'SVGProps<SVGSVGElement>'.
-    <svg
-      aria-hidden={ariaHidden}
-      aria-label={accessibilityLabel}
-      className={cs}
-      data-test-id={dataTestId}
-      height={size}
-      role="img"
-      viewBox="0 0 24 24"
-      width={size}
-    >
-      <path d={path} />
-    </svg>
+    <InternalIcon
+      accessibilityLabel={accessibilityLabel}
+      color={color}
+      dangerouslySetSvgPath={dangerouslySetSvgPath}
+      dataTestId={dataTestId}
+      icon={icon}
+      inline={inline}
+      size={size}
+    />
   );
 }