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

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon, ProgressLoadingBar } from '@ohif/ui';
+import { Button, ProgressLoadingBar } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import DicomFileUploader, {
   EVENTS,
   UploadStatus,
@@ -313,10 +314,10 @@ function DicomUploadProgress({
       <div className="ml-auto flex w-6 justify-center">
         {numFails > 0 && (
           <div onClick={() => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)}>
-            <Icon
+            <Icons.ByName
               className="cursor-pointer"
               name="icon-status-alert"
-            ></Icon>
+            ></Icons.ByName>
           </div>
         )}
       </div>

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -6,7 +6,7 @@ import DicomFileUploader, {
   UploadRejection,
   UploadStatus,
 } from '../../utils/DicomFileUploader';
-import { Icon } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 
 type DicomUploadProgressItemProps = {
   dicomFileUploader: DicomFileUploader;
@@ -54,17 +54,17 @@ const DicomUploadProgressItem = memo(
       switch (dicomFileUploader.getStatus()) {
         case UploadStatus.Success:
           return (
-            <Icon
+            <Icons.ByName
               name="status-tracked"
               className="text-primary-light"
-            ></Icon>
+            />
           );
         case UploadStatus.InProgress:
-          return <Icon name="icon-transferring"></Icon>;
+          return <Icons.ByName name="icon-transferring" />;
         case UploadStatus.Failed:
-          return <Icon name="icon-alert-small"></Icon>;
+          return <Icons.ByName name="icon-alert-small" />;
         case UploadStatus.Cancelled:
-          return <Icon name="icon-alert-outline"></Icon>;
+          return <Icons.ByName name="icon-alert-outline" />;
         default:
           return <></>;
       }
@@ -88,9 +88,8 @@ const DicomUploadProgressItem = memo(
                 <div className="w-10 text-right">{percentComplete}%</div>
               )}
               <div className="ml-auto flex cursor-pointer">
-                <Icon
+                <Icons.Close
                   className="text-primary-active self-center"
-                  name="close"
                   onClick={cancelUpload}
                 />
               </div>

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportSegmentationMenu.tsx

@@ -110,7 +110,7 @@ function ViewportSegmentationMenu({
           <Separator className="bg-input mb-3" />
           <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
           <ul className="space-y-1">
-            {availableSegmentations.map(({segmentationId, label}) => (
+            {availableSegmentations.map(({ segmentationId, label }) => (
               <li
                 key={segmentationId}
                 className="flex items-center text-sm"

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx

@@ -1,4 +1,5 @@
-import { AllInOneMenu, Icon } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import React, { ReactElement } from 'react';
 import { VolumeRenderingPresetsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingPresetsContent } from './VolumeRenderingPresetsContent';
@@ -30,8 +31,8 @@ export function VolumeRenderingPresets({
   return (
     <AllInOneMenu.Item
       label="Rendering Presets"
-      icon={<Icon name="VolumeRendering" />}
-      rightIcon={<Icon name="action-new-dialog" />}
+      icon={<Icons.VolumeRendering />}
+      rightIcon={<Icons.ByName name="action-new-dialog" />}
       onClick={onClickPresets}
     />
   );

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@ohif/ui';
 import { ButtonEnums } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import React, { ReactElement, useState, useCallback } from 'react';
 import { Button, InputFilterText } from '@ohif/ui';
 import { ViewportPreset, VolumeRenderingPresetsContentProps } from '../../types/ViewportPresets';
@@ -61,7 +61,7 @@ export function VolumeRenderingPresetsContent({
                   handleApply({ preset: preset.name, viewportId });
                 }}
               >
-                <Icon
+                <Icons.ByName
                   name={preset.name}
                   className={
                     selectedPreset?.name === preset.name