From 74ef8e4fa438b145b39849cbbdb04ea77c3bd5a8 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 16 Feb 2023 07:26:26 -0600
Subject: [PATCH] UX: Icon: Remove Plus icon (#17666)

---
 .../files-to-convert.json                     |  1 -
 .../account-menu/account-menu.component.js    |  9 +++-
 ui/components/ui/icon/icon-plus.js            | 47 -------------------
 ui/components/ui/icon/icon.stories.js         |  2 -
 4 files changed, 7 insertions(+), 52 deletions(-)
 delete mode 100644 ui/components/ui/icon/icon-plus.js

diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
index c4a65d355..babed9348 100644
--- a/development/ts-migration-dashboard/files-to-convert.json
+++ b/development/ts-migration-dashboard/files-to-convert.json
@@ -890,7 +890,6 @@
   "ui/components/ui/icon/icon-eye-slash.js",
   "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-token-search.js",
   "ui/components/ui/icon/icon.stories.js",
   "ui/components/ui/icon/info-icon-inverted.component.js",
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 713fa9401..e4cb629c7 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@@ -33,7 +33,6 @@ import {
 import TextField from '../../ui/text-field';
 import IconCheck from '../../ui/icon/icon-check';
 import IconCog from '../../ui/icon/icon-cog';
-import IconPlus from '../../ui/icon/icon-plus';
 import IconImport from '../../ui/icon/icon-import';
 
 import Button from '../../ui/button';
@@ -375,7 +374,13 @@ export default class AccountMenu extends Component {
             });
             history.push(NEW_ACCOUNT_ROUTE);
           }}
-          icon={<IconPlus color="var(--color-icon-alternative)" />}
+          icon={
+            <Icon
+              name={ICON_NAMES.ADD}
+              color={Color.iconAlternative}
+              ariaLabel={t('createAccount')}
+            />
+          }
           text={t('createAccount')}
         />
         <AccountMenuItem
diff --git a/ui/components/ui/icon/icon-plus.js b/ui/components/ui/icon/icon-plus.js
deleted file mode 100644
index 68d30aff2..000000000
--- a/ui/components/ui/icon/icon-plus.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
- * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
- */
-
-const IconPlus = ({
-  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="m277 107c0-12-9-22-21-22-12 0-21 10-21 22l0 128-128 0c-12 0-22 9-22 21 0 12 10 21 22 21l128 0 0 128c0 12 9 22 21 22 12 0 21-10 21-22l0-128 128 0c12 0 22-9 22-21 0-12-10-21-22-21l-128 0z" />
-  </svg>
-);
-
-IconPlus.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 IconPlus;
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
index 493901593..00a88adf1 100644
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@@ -25,7 +25,6 @@ import Swap from './swap-icon-for-list.component';
 import IconCheck from './icon-check';
 import IconCog from './icon-cog';
 import IconImport from './icon-import';
-import IconPlus from './icon-plus';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
 import IconTokenSearch from './icon-token-search';
@@ -119,7 +118,6 @@ export const DefaultStory = (args) => (
         }}
       >
         <IconItem Component={<IconCheck {...args} />} />
-        <IconItem Component={<IconPlus {...args} />} />
         <IconItem Component={<IconImport {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />