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

extensions/default/src/Components/DataSourceConfigurationComponent.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, useModal } from '@ohif/ui';
+import { useModal } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 import DataSourceConfigurationModalComponent from './DataSourceConfigurationModalComponent';
 
@@ -86,11 +87,10 @@ function DataSourceConfigurationComponent({
 
   return configuredItems ? (
     <div className="text-aqua-pale flex items-center overflow-hidden">
-      <Icon
-        name="settings"
+      <Icons.Settings
         className="mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer"
         onClick={showConfigurationModal}
-      ></Icon>
+      />
       {configuredItems.map((item, itemIndex) => {
         return (
           <div

extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 import ItemListComponent from './ItemListComponent';
 
@@ -109,8 +109,8 @@ function DataSourceConfigurationModalComponent({
     itemIndex === currentSelectedItemIndex + 1
       ? classNames('border-2', 'border-solid', 'border-primary-light')
       : itemIndex < selectedItems.length
-      ? 'border border-solid border-primary-active hover:border-primary-light active:border-white'
-      : 'border border-dashed border-secondary-light';
+        ? 'border border-solid border-primary-active hover:border-primary-light active:border-white'
+        : 'border border-dashed border-secondary-light';
 
   const getSelectedItemTextClasses = itemIndex =>
     itemIndex <= selectedItems.length ? 'text-primary-light' : 'text-primary-active';
@@ -152,9 +152,9 @@ function DataSourceConfigurationModalComponent({
             >
               <div className="text- flex items-center gap-2">
                 {itemLabelIndex < selectedItems.length ? (
-                  <Icon name="status-tracked" />
+                  <Icons.ByName name="status-tracked" />
                 ) : (
-                  <Icon name="status-untracked" />
+                  <Icons.ByName name="status-untracked" />
                 )}
                 <div className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES)}>{t(itemLabel)}</div>
               </div>

extensions/default/src/Components/ItemListComponent.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, InputFilterText, LoadingIndicatorProgress } from '@ohif/ui';
+import { Button, InputFilterText, LoadingIndicatorProgress } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 
 type ItemListComponentProps = {
@@ -38,10 +39,7 @@ function ItemListComponent({
           <LoadingIndicatorProgress className={'h-full w-full'} />
         ) : itemList.length === 0 ? (
           <div className="text-primary-light flex h-full flex-col items-center justify-center px-6 py-4">
-            <Icon
-              name="magnifier"
-              className="mb-4"
-            />
+            <Icons.ToolMagnify className="mb-4" />
             <span>{t(`No ${itemLabel} available`)}</span>
           </div>
         ) : (
@@ -68,7 +66,7 @@ function ItemListComponent({
                       <Button
                         onClick={() => onItemClicked(item)}
                         className="invisible group-hover:visible"
-                        endIcon={<Icon name="arrow-left" />}
+                        endIcon={<Icons.ByName name="arrow-left" />}
                       >
                         {t('Select')}
                       </Button>

extensions/default/src/ViewerLayout/HeaderPatientInfo/HeaderPatientInfo.tsx

@@ -66,7 +66,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
           </div>
         )}
       </div>
-      <Icons.ChevronPatient className={`text-primary-active ${expanded ? 'rotate-180' : ''}`} />
+      <Icons.ArrowLeft className={`text-primary-active ${expanded ? 'rotate-180' : ''}`} />
     </div>
   );
 }