diff --git a/packages/gestalt/src/Icon.tsx b/packages/gestalt/src/Icon.tsx index b5ad494613..0cb9b51509 100644 --- 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 = Object.keys(icons); -const swapOnRtlIconNames: ReadonlyArray = ['list-numbered']; -const flipOnRtlIconNames: ReadonlyArray = [ - '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'. - - - + ); }