feat: migrate icons to ui-next (#4606)

platform/app/src/routes/Debug.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 
 // this is a debug component that is used to list various things that might
 // be useful for debugging such as cross origin errors, etc.
@@ -18,7 +18,7 @@ function Debug() {
               <p className="text-primary-active mt-4 text-xl font-semibold">Debug Information</p>
               <div className="mt-4 flex items-center space-x-2">
                 <p className="text-md text-white">Cross Origin Isolated (COOP/COEP)</p>
-                <Icon
+                <Icons.ByName
                   name={
                     window.crossOriginIsolated ? 'notifications-success' : 'notifications-error'
                   }

platform/app/src/routes/Local/Local.tsx

@@ -8,7 +8,8 @@ import filesToStudies from './filesToStudies';
 
 import { extensionManager } from '../../App.tsx';
 
-import { Icon, Button, LoadingIndicatorProgress } from '@ohif/ui';
+import { Button, Icon, LoadingIndicatorProgress } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 
 const getLoadButton = (onDrop, text, isDir) => {
   return (
@@ -22,7 +23,7 @@ const getLoadButton = (onDrop, text, isDir) => {
             rounded="full"
             variant="contained" // outlined
             disabled={false}
-            endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
+            endIcon={<Icons.LaunchArrow />}
             className={classnames('font-medium', 'ml-2')}
             onClick={() => {}}
           >
@@ -123,13 +124,10 @@ function Local({ modePath }: LocalProps) {
           {...getRootProps()}
           style={{ width: '100%', height: '100%' }}
         >
-          <div className="flex h-screen w-screen items-center justify-center ">
+          <div className="flex h-screen w-screen items-center justify-center">
             <div className="bg-secondary-dark mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md">
               <div className="flex items-center justify-center">
-                <Icon
-                  name="logo-dark-background"
-                  className="h-28"
-                />
+                <Icons.OHIFLogoColorDarkBackground className="h-28" />
               </div>
               <div className="space-y-2 pt-4 text-center">
                 {dropInitiated ? (
@@ -149,7 +147,7 @@ function Local({ modePath }: LocalProps) {
                   </div>
                 )}
               </div>
-              <div className="flex justify-around pt-4 ">
+              <div className="flex justify-around pt-4">
                 {getLoadButton(onDrop, 'Load files', false)}
                 {getLoadButton(onDrop, 'Load folders', true)}
               </div>

platform/app/src/routes/WorkList/WorkList.tsx

@@ -30,7 +30,7 @@ import {
   ButtonEnums,
 } from '@ohif/ui';
 
-import { Header } from '@ohif/ui-next';
+import { Header, Icons } from '@ohif/ui-next';
 
 import { Types } from '@ohif/ui';
 
@@ -322,8 +322,7 @@ function WorkList({
           key: 'instances',
           content: (
             <>
-              <Icon
-                name="group-layers"
+              <Icons.GroupLayers
                 className={classnames('mr-2 inline-flex w-4', {
                   'text-primary-active': isExpanded,
                   'text-secondary-light': !isExpanded,
@@ -422,11 +421,12 @@ function WorkList({
                         ) : null
                       }
                       startIcon={
-                        <Icon
-                          className="!h-[20px] !w-[20px] text-black"
-                          name={isValidMode ? 'launch-arrow' : 'launch-info'}
-                        />
-                      } // launch-arrow | launch-info
+                        isValidMode ? (
+                          <Icons.LaunchArrow className="!h-[20px] !w-[20px] text-black" />
+                        ) : (
+                          <Icons.LaunchInfo className="!h-[20px] !w-[20px] text-black" />
+                        )
+                      }
                       onClick={() => {}}
                       dataCY={`mode-${mode.routeName}-${studyInstanceUid}`}
                       className={isValidMode ? 'text-[13px]' : 'bg-[#222d44] text-[13px]'}