fix: update recent items icon from SVG to react component (opensearch…

…-project#7478)

* update recent items icon from svg to react component

Signed-off-by: tygao <tygao@amazon.com>

* Changeset file for PR opensearch-project#7478 created/updated

---------

Signed-off-by: tygao <tygao@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/7478.yml

@@ -0,0 +1,2 @@
+fix:
+- Update recent items icon from SVG to react component ([#7478](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7478))

src/core/public/chrome/ui/header/recent_items.tsx

@@ -20,8 +20,8 @@ import { WorkspaceObject } from '../../../workspace';
 import { createRecentNavLink } from './nav_link';
 import { HttpStart } from '../../../http';
 import { ChromeNavLink } from '../../../';
-// TODO: replace this icon once added to OUI
-import recent_items from './assets/recent_items.svg';
+// TODO: replace this icon once added to OUI https://github.com/opensearch-project/OpenSearch-Dashboards/issues/7354
+import { RecentItemsIcon } from './recent_items_icon';
 
 export interface Props {
   recentlyAccessed$: Rx.Observable<ChromeRecentlyAccessedHistoryItem[]>;
@@ -71,7 +71,7 @@ export const RecentItems = ({
           }}
           data-test-subj="recentItemsSectionButton"
         >
-          <EuiIcon type={recent_items} size="m" />
+          <EuiIcon type={RecentItemsIcon} size="m" />
         </EuiHeaderSectionItemButton>
       }
       isOpen={isPopoverOpen}

src/core/public/chrome/ui/header/recent_items_icon.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+
+// TODO: remove this icon once added to OUI https://github.com/opensearch-project/OpenSearch-Dashboards/issues/7354
+export const RecentItemsIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.0001 1.66699C14.6024 1.66699 18.3334 5.39795 18.3334 10.0003C18.3334 14.6027 14.6024 18.3337 10.0001 18.3337C5.39771 18.3337 1.66675 14.6027 1.66675 10.0003H3.33341C3.33341 13.6822 6.31818 16.667 10.0001 16.667C13.682 16.667 16.6667 13.6822 16.6667 10.0003C16.6667 6.31843 13.682 3.33366 10.0001 3.33366C7.7086 3.33366 5.68714 4.48978 4.48717 6.25053L6.66675 6.25033V7.91699H1.66675V2.91699H3.33341L3.33332 4.99964C4.8537 2.97595 7.27402 1.66699 10.0001 1.66699ZM10.8334 5.83366L10.8332 9.65449L13.5356 12.3573L12.3571 13.5358L9.16658 10.3445L9.16675 5.83366H10.8334Z"
+        fill="#424242"
+      />
+    </svg>
+  );
+};

src/core/typings.ts

@@ -36,10 +36,3 @@ type DeeplyMockedKeys<T> = {
   T;
 
 type MockedKeys<T> = { [P in keyof T]: jest.Mocked<T[P]> };
-
-// Need to declare like typings/index.d.ts otherwise would be overwritten
-declare module '*.svg' {
-  const content: string;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}