feat(bulk-import): update bulk import icon (janus-idp#1826)

plugins/bulk-import/dev/index.tsx

@@ -4,6 +4,7 @@ import { createDevApp } from '@backstage/dev-utils';
 
 import { createDevAppThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 
+import { icon } from '../src/components/BulkImportIcon';
 import { BulkImportPage, bulkImportPlugin } from '../src/plugin';
 
 createDevApp()
@@ -13,5 +14,6 @@ createDevApp()
     element: <BulkImportPage />,
     title: 'Bulk import',
     path: '/bulk-import/repositories',
+    icon,
   })
   .render();

plugins/bulk-import/src/components/BulkImportIcon.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
 
 import { SidebarItem } from '@backstage/core-components';
-import { IconComponent } from '@backstage/core-plugin-api';
 
-import LibraryAddOutlinedIcon from '@mui/icons-material/LibraryAddOutlined';
+import { getImageForIconClass } from '../utils/icons';
+
+export const icon = () => {
+  return (
+    <img
+      src={getImageForIconClass('icon-bulk-import-white')}
+      alt="bulk import icon"
+      style={{ height: '25px' }}
+    />
+  );
+};
 
 export const BulkImportIcon = () => {
   // permission logic
 
   return (
-    <SidebarItem
-      text="Bulk import"
-      to="bulk-import/repositories"
-      icon={LibraryAddOutlinedIcon as IconComponent}
-    />
+    <SidebarItem text="Bulk import" to="bulk-import/repositories" icon={icon} />
   );
 };

plugins/bulk-import/src/utils/icons.ts

@@ -1,5 +1,6 @@
 import approvalToolBlackImg from '../images/ApprovalTool_Black.svg';
 import approvalToolWhiteImg from '../images/ApprovalTool_White.svg';
+import bulkImportWhiteImg from '../images/BulkImportIcon-White.svg';
 import chooseRepositoriesBlackImg from '../images/ChooseRepositories_Black.svg';
 import chooseRepositoriesWhiteImg from '../images/ChooseRepositories_White.svg';
 import editPullRequestBlackImg from '../images/EditPullRequest_Black.svg';
@@ -19,7 +20,8 @@ const logos = new Map<string, any>()
   .set('icon-choose-repositories-white', chooseRepositoriesWhiteImg)
   .set('icon-generate-cataloginfo-white', generateCatalogInfoWhiteImg)
   .set('icon-track-status-white', trackStatusWhiteImg)
-  .set('icon-approval-tool-white', approvalToolWhiteImg);
+  .set('icon-approval-tool-white', approvalToolWhiteImg)
+  .set('icon-bulk-import-white', bulkImportWhiteImg);
 
 export const getImageForIconClass = (iconClass: string): string => {
   return logos.get(iconClass);