From 09a170bfe2a62acd4fc8e4208b3999aa3279c870 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 23 Feb 2023 15:19:23 -0600
Subject: [PATCH] UX: Icons: Remove icon-import (#17816)

* UX: Icons: Remove icon-import

* Add new icon
---
 app/images/icons/import.svg                   |  4 +-
 .../account-menu/account-menu.component.js    |  6 +--
 ui/components/ui/icon/icon-import.js          | 47 -------------------
 ui/components/ui/icon/icon.stories.js         |  2 -
 4 files changed, 3 insertions(+), 56 deletions(-)
 delete mode 100644 ui/components/ui/icon/icon-import.js

diff --git a/app/images/icons/import.svg b/app/images/icons/import.svg
index 8ce0942d6..a6b986d7a 100644
--- a/app/images/icons/import.svg
+++ b/app/images/icons/import.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <path d="m313 469l-114 0c-108 0-156-48-156-156l0-114c0-108 48-156 156-156l39 0c13 0 23 9 23 23 0 13-10 23-23 23l-39 0c-83 0-110 27-110 110l0 114c0 83 27 110 110 110l114 0c83 0 110-27 110-110l0-39c0-13 10-23 23-23 14 0 23 10 23 23l0 39c0 108-48 156-156 156z m55-208l-91 0c-14 0-23-10-23-23l0-92c0-14 9-23 23-23 13 0 23 9 23 23l0 37 130-133c10-10 23-10 32 0 10 9 10 22 0 32l-133 133 37 0c14 0 23 9 23 23 0 13-9 23-21 23z"/>
-</svg>
+  <path d="m256 64c10 0 18 8 18 18l0 207 30-30c7-7 19-7 26 0 7 7 7 19 0 26l-61 60c-7 7-19 7-26 0l-61-60c-7-7-7-19 0-26 7-7 19-7 26 0l30 30 0-207c0-10 8-18 18-18z m63 140c1-10 10-18 20-17 35 3 64 14 83 37 19 23 26 54 26 92l0 2c0 42-8 76-32 99-23 23-58 31-101 31l-118 0c-43 0-78-8-101-31-24-23-32-57-32-99l0-2c0-38 7-69 25-91 19-23 48-34 83-38 10 0 19 7 20 17 0 9-7 18-17 19-29 3-47 11-57 24-11 13-17 35-17 69l0 2c0 38 7 61 21 74 13 13 36 20 75 20l118 0c39 0 62-7 75-20 14-13 21-36 21-74l0-2c0-35-6-56-17-69-11-13-28-22-58-24-10-1-18-10-17-19z"/>  
+</svg>
\ No newline at end of file
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 880f93aa1..1805d7a5e 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/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 IconCog from '../../ui/icon/icon-cog';
-import IconImport from '../../ui/icon/icon-import';
 
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
@@ -394,10 +393,7 @@ export default class AccountMenu extends Component {
             history.push(IMPORT_ACCOUNT_ROUTE);
           }}
           icon={
-            <IconImport
-              color="var(--color-icon-alternative)"
-              ariaLabel={t('importAccount')}
-            />
+            <Icon name={ICON_NAMES.IMPORT} color={IconColor.iconAlternative} />
           }
           text={t('importAccount')}
         />
diff --git a/ui/components/ui/icon/icon-import.js b/ui/components/ui/icon/icon-import.js
deleted file mode 100644
index bdc20f30d..000000000
--- a/ui/components/ui/icon/icon-import.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 IconImport = ({
-  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="m256 85c12 0 21 10 21 22l0 183 71-70c8-9 21-9 30 0 8 8 8 21 0 30l-107 106 0 1c-4 3-9 6-15 6l0 0c-3 0-6-1-8-2-3-1-5-3-7-5l-107-106c-8-9-8-22 0-30 9-9 22-9 30 0l71 70 0-183c0-12 9-22 21-22z m-149 299c-12 0-22 10-22 21 0 12 10 22 22 22l298 0c12 0 22-10 22-22 0-11-10-21-22-21z" />
-  </svg>
-);
-
-IconImport.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 IconImport;
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
index ee2939a42..ece776384 100644
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@@ -23,7 +23,6 @@ import Sign from './sign-icon.component';
 import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
 import IconCog from './icon-cog';
-import IconImport from './icon-import';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
 import IconTokenSearch from './icon-token-search';
@@ -116,7 +115,6 @@ export const DefaultStory = (args) => (
           gridTemplateColumns: 'repeat(auto-fill, 176px)',
         }}
       >
-        <IconItem Component={<IconImport {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />
         <IconItem Component={<SearchIcon {...args} />} />