UX: Update support icon (#17560)

development/ts-migration-dashboard/files-to-convert.json

@@ -896,7 +896,6 @@
   "ui/components/ui/icon/icon-eye.js",
   "ui/components/ui/icon/icon-import.js",
   "ui/components/ui/icon/icon-plus.js",
-  "ui/components/ui/icon/icon-speech-bubbles.js",
   "ui/components/ui/icon/icon-token-search.js",
   "ui/components/ui/icon/icon.stories.js",
   "ui/components/ui/icon/info-icon-inverted.component.js",

ui/components/app/account-menu/account-menu.component.js

@@ -32,7 +32,6 @@ import {
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
 import IconCheck from '../../ui/icon/icon-check';
-import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
 import IconConnect from '../../ui/icon/icon-connect';
 import IconCog from '../../ui/icon/icon-cog';
 import IconPlus from '../../ui/icon/icon-plus';
@@ -41,6 +40,8 @@ import IconImport from '../../ui/icon/icon-import';
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { Color } from '../../../helpers/constants/design-system';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -460,10 +461,7 @@ export default class AccountMenu extends Component {
             global.platform.openTab({ url: supportLink });
           }}
           icon={
-            <IconSpeechBubbles
-              color="var(--color-icon-alternative)"
-              ariaLabel={supportText}
-            />
+            <Icon name={ICON_NAMES.MESSAGES} color={Color.iconAlternative} />
           }
           text={supportText}
         />

ui/components/ui/icon/icon-speech-bubbles.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconSpeechBubbles = ({
-  size = 24,
-  color = 'currentColor',
-  ariaLabel,
-  className,
-}) => (
-  <svg
-    width={size}
-    height={size}
-    fill={color}
-    className={className}
-    aria-label={ariaLabel}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <path d="m357 221c0-63-66-114-146-114-81 0-146 51-146 114 0 25 10 47 27 66-10 22-25 39-25 39-2 1-3 4-2 6 2 3 3 3 6 3 25 0 46-8 61-18 23 12 50 18 79 18 80 0 146-50 146-114z m86 157c16-18 26-41 26-66 0-47-38-88-91-105 1 5 2 10 2 14 0 76-76 137-169 137-8 0-15 0-22-1 21 41 73 70 134 70 29 0 56-7 78-18 16 9 37 18 63 18 2 0 4-1 5-3 0-2 0-5-2-7 0 0-15-17-24-39z" />
-  </svg>
-);
-
-IconSpeechBubbles.propTypes = {
-  /**
-   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
-   */
-  size: PropTypes.number,
-  /**
-   * The color of the icon accepts design token css variables
-   */
-  color: PropTypes.string,
-  /**
-   * An additional className to assign the Icon
-   */
-  className: PropTypes.string,
-  /**
-   * The aria-label of the icon for accessibility purposes
-   */
-  ariaLabel: PropTypes.string,
-};
-
-export default IconSpeechBubbles;

ui/components/ui/icon/icon.stories.js

@@ -30,7 +30,6 @@ import IconCheck from './icon-check';
 import IconCog from './icon-cog';
 import IconConnect from './icon-connect';
 import IconImport from './icon-import';
-import IconSpeechBubbles from './icon-speech-bubbles';
 import IconPlus from './icon-plus';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
@@ -128,7 +127,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<IconPlus {...args} />} />
         <IconItem Component={<IconImport {...args} />} />
         <IconItem Component={<IconConnect {...args} />} />
-        <IconItem Component={<IconSpeechBubbles {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />
         <IconItem Component={<SearchIcon {...args} />} />