ohif-viewer/platform/docs/docs/migration-guide/3p9-to-3p10/Icons.md at 4e2ae328744ed95589c2cdf7a531454a25bf88b5

TrizTech/ohif-viewer

0 Fork 0

Files

T

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

2024-12-17 13:20:19 -05:00

20 KiB

Raw Blame History

sidebar_position, sidebar_label

sidebar_position	sidebar_label
2	Icons

Migration Guide: Icon Component Updates

General Overview

This migration involves changes to how icons are used within the OHIF platform. The core change is the move to a new icon component library, @ohif/ui-next, which provides more flexibility and a more consistent naming convention for icons.

Key Changes:

New Icon Library: The primary change is the shift from using <Icon> from @ohif/ui to using the new Icons component from @ohif/ui-next.
AbcDef Naming Convention: The new library uses a AbcDef (PascalCase) naming convention for the icons. For instance, status-alert is now StatusAlert.
Legacy Fallback: To ease the transition, a legacy fallback has been provided using Icons.ByName. This allows you to continue using the old name="status-alert" format but is not the recommended way moving forward.
Direct Icon Component Access: The recommended approach is to use Icons.StatusAlert instead of <Icons.ByName name="status-alert"/> this way will make code more clear and readable.

Migration Strategies

You have two ways to approach the migration:

Recommended Approach (Gradual Adoption):
- Start by updating your codebase to use the Icons.Method for the new icon naming convention.
- For example, replace <Icon name="status-alert" /> with <Icons.StatusAlert />.
- This ensures your code is aligned with the new standard and provides optimal compatibility in the future.
- This method can be rolled out in phases.
Legacy Fallback Approach (Temporary):
- If a full migration is not immediately feasible, you can use the legacy fallback temporarily:
  - Replace <Icon name="status-alert" /> with <Icons.ByName name="status-alert" />.
- This option allows you to complete the migration with minimal disruption to the old code
- However, it is highly recommended to move towards the Icons.Method approach to take advantage of all the new library offers and have a cleaner code base.

Recommendation: We strongly recommend using the Recommended Approach for a more maintainable and consistent codebase going forward.

Specific Changes (Code Examples)

Here are some specific examples based on the diff you provided, illustrating both the legacy fallback and recommended approach:

Example 1: Status Icons in _getStatusComponent.tsx

Old Code (@ohif/ui):

import { Icon, Tooltip } from '@ohif/ui';

// ...
  case true:
    StatusIcon = () => <Icon name="status-alert" />;
    break;
  case false:
    StatusIcon = () => (
      <Icon
        className="text-aqua-pale"
        name="status-untracked"
      />
    );
    break;
//...

Legacy Fallback Approach (Icons.ByName):

import { Tooltip } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';

// ...
  case true:
    StatusIcon = () => <Icons.ByName name="status-alert" />;
    break;
  case false:
    StatusIcon = () => (
      <Icons.ByName
        className="text-aqua-pale"
        name="status-untracked"
      />
    );
    break;
//...

Recommended Approach (Icons.StatusAlert, Icons.StatusUntracked):

import { Tooltip } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';

// ...
 case true:
    StatusIcon = () => <Icons.StatusAlert />;
    break;
  case false:
    StatusIcon = () => (
      <Icons.StatusUntracked
        className="text-aqua-pale"
      />
    );
    break;
//...

Example 5: Icon usage in WorkList.tsx

Old Code (@ohif/ui):

   <Icon
      name="group-layers"

Recommended Approach (Icons.GroupLayers):

    <Icons.GroupLayers

   <Icons.ByName
      className="!h-[20px] !w-[20px] text-black"
      name={isValidMode ? 'launch-arrow' : 'launch-info'}
    />

Recommended Approach (Icons.LaunchArrow, Icons.LaunchInfo):

     isValidMode ? (
      <Icons.LaunchArrow className="!h-[20px] !w-[20px] text-black" />
    ) : (
      <Icons.LaunchInfo className="!h-[20px] !w-[20px] text-black" />
    )

Detailed Renaming Table

Old Icon Name	New Icon Component Name	Example Usage (`Icons.`)	Notes
`status-alert`	`StatusAlert`	`Icons.StatusAlert`
`status-untracked`	`StatusUntracked`	`Icons.StatusUntracked`
`status-locked`	`StatusLocked`	`Icons.StatusLocked`
`icon-transferring`	`IconTransferring`	`Icons.IconTransferring`
`icon-alert-small`	`Alert`	`Icons.Alert`
`icon-alert-outline`	`AlertOutline`	`Icons.AlertOutline`
`icon-status-alert`	`Alert`	`Icons.Alert`
`action-new-dialog`	`ActionNewDialog`	`Icons.ActionNewDialog`
`VolumeRendering`	`VolumeRendering`	`Icons.VolumeRendering`
`chevron-left`	`ChevronClosed`	`Icons.ChevronClosed`	Use when arrow direction needs to point left
`chevron-down`	`ChevronOpen`	`Icons.ChevronOpen`	Use when arrow direction needs to point down
`launch-arrow`	`LaunchArrow`	`Icons.LaunchArrow`
`launch-info`	`LaunchInfo`	`Icons.LaunchInfo`
`group-layers`	`GroupLayers`	`Icons.GroupLayers`
`icon-upload`	`Upload`	`Icons.Upload`
`icon-search`	`Search`	`Icons.Search`
`icon-clear-field`	`Clear`	`Icons.Clear`
`icon-add`	`Add`	`Icons.Add`
`icon-close`	`Close`	`Icons.Close`
`icon-pause`	`Pause`	`Icons.Pause`
`icon-play`	`Play`	`Icons.Play`
`icon-multiple-patients`	`MultiplePatients`	`Icons.MultiplePatients`
`icon-settings`	`Settings`	`Icons.Settings`
`icon-more-menu`	`More`	`Icons.More`
`content-prev`	`ContentPrev`	`Icons.ContentPrev`
`content-next`	`ContentNext`	`Icons.ContentNext`
`checkbox-checked`	`CheckBoxChecked`	`Icons.CheckBoxChecked`
`checkbox-unchecked`	`CheckBoxUnchecked`	`Icons.CheckBoxUnchecked`
`checkbox-default`	`CheckBoxUnchecked`	`Icons.CheckBoxUnchecked`
`checkbox-active`	`CheckBoxChecked`	`Icons.CheckBoxChecked`
`sorting-active-up`	`SortingAscending`	`Icons.SortingAscending`
`sorting-active-down`	`SortingDescending`	`Icons.SortingDescending`
`sorting`	`Sorting`	`Icons.Sorting`
`link`	`Link`	`Icons.Link`
`unlink`	`Link`	`Icons.Link`
`info-action`	`Info`	`Icons.Info`
`database`	`Database`	`Icons.Database`
`tool-3d-rotate`	`Tool3DRotate`	`Icons.Tool3DRotate`
`tool-angle`	`ToolAngle`	`Icons.ToolAngle`
`tool-annotate`	`ToolAnnotate`	`Icons.ToolAnnotate`
`tool-bidirectional`	`ToolBidirectional`	`Icons.ToolBidirectional`
`tool-calibration`	`ToolCalibrate`	`Icons.ToolCalibrate`
`tool-capture`	`ToolCapture`	`Icons.ToolCapture`
`tool-cine`	`ToolCine`	`Icons.ToolCine`
`tool-circle`	`ToolCircle`	`Icons.ToolCircle`
`tool-cobb-angle`	`ToolCobbAngle`	`Icons.ToolCobbAngle`
`tool-create-threshold`	`ToolCreateThreshold`	`Icons.ToolCreateThreshold`
`tool-crosshair`	`ToolCrosshair`	`Icons.ToolCrosshair`
`dicom-tag-browser`	`ToolDicomTagBrowser`	`Icons.ToolDicomTagBrowser`
`tool-flip-horizontal`	`ToolFlipHorizontal`	`Icons.ToolFlipHorizontal`
`tool-freehand-polygon`	`ToolFreehandPolygon`	`Icons.ToolFreehandPolygon`
`tool-freehand-roi`	`ToolFreehandRoi`	`Icons.ToolFreehandRoi`
`tool-freehand`	`ToolFreehand`	`Icons.ToolFreehand`
`tool-fusion-color`	`ToolFusionColor`	`Icons.ToolFusionColor`
`tool-invert`	`ToolInvert`	`Icons.ToolInvert`
`tool-layout-default`	`ToolLayoutDefault`	`Icons.ToolLayoutDefault`
`tool-length`	`ToolLength`	`Icons.ToolLength`
`tool-magnetic-roi`	`ToolMagneticRoi`	`Icons.ToolMagneticRoi`
`tool-magnify`	`ToolMagnify`	`Icons.ToolMagnify`
`tool-measure-ellipse`	`ToolMeasureEllipse`	`Icons.ToolMeasureEllipse`
`tool-more-menu`	`ToolMoreMenu`	`Icons.ToolMoreMenu`
`tool-move`	`ToolMove`	`Icons.ToolMove`
`tool-polygon`	`ToolPolygon`	`Icons.ToolPolygon`
`tool-quick-magnify`	`ToolQuickMagnify`	`Icons.ToolQuickMagnify`
`tool-rectangle`	`ToolRectangle`	`Icons.ToolRectangle`
`tool-referenceLines`	`ToolReferenceLines`	`Icons.ToolReferenceLines`
`tool-reset`	`ToolReset`	`Icons.ToolReset`
`tool-rotate-right`	`ToolRotateRight`	`Icons.ToolRotateRight`
`tool-seg-brush`	`ToolSegBrush`	`Icons.ToolSegBrush`
`tool-seg-eraser`	`ToolSegEraser`	`Icons.ToolSegEraser`
`tool-seg-shape`	`ToolSegShape`	`Icons.ToolSegShape`
`tool-seg-threshold`	`ToolSegThreshold`	`Icons.ToolSegThreshold`
`tool-spline-roi`	`ToolSplineRoi`	`Icons.ToolSplineRoi`
`tool-stack-image-sync`	`ToolStackImageSync`	`Icons.ToolStackImageSync`
`tool-stack-scroll`	`ToolStackScroll`	`Icons.ToolStackScroll`
`tool-toggle-dicom-overlay`	`ToolToggleDicomOverlay`	`Icons.ToolToggleDicomOverlay`
`tool-ultrasound-bidirectional`	`ToolUltrasoundBidirectional`	`Icons.ToolUltrasoundBidirectional`
`tool-window-level`	`ToolWindowLevel`	`Icons.ToolWindowLevel`
`tool-window-region`	`ToolWindowRegion`	`Icons.ToolWindowRegion`
`tool-zoom`	`ToolZoom`	`Icons.ToolZoom`
`tool-layout`	`ToolLayout`	`Icons.ToolLayout`
`icon-tool-eraser`	`ToolEraser`	`Icons.ToolEraser`
`icon-tool-brush`	`ToolBrush`	`Icons.ToolBrush`
`icon-tool-threshold`	`ToolThreshold`	`Icons.ToolThreshold`
`icon-tool-shape`	`ToolShape`	`Icons.ToolShape`
`icon-color-lut`	`IconColorLUT`	`Icons.IconColorLUT`
`viewport-window-level`	`ViewportWindowLevel`	`Icons.ViewportWindowLevel`
`notifications-info`	`NotificationInfo`	`Icons.NotificationInfo`
`layout-advanced-3d-four-up`	`LayoutAdvanced3DFourUp`	`Icons.LayoutAdvanced3DFourUp`
`layout-advanced-3d-main`	`LayoutAdvanced3DMain`	`Icons.LayoutAdvanced3DMain`
`layout-advanced-3d-only`	`LayoutAdvanced3DOnly`	`Icons.LayoutAdvanced3DOnly`
`layout-advanced-3d-primary`	`LayoutAdvanced3DPrimary`	`Icons.LayoutAdvanced3DPrimary`
`layout-advanced-axial-primary`	`LayoutAdvancedAxialPrimary`	`Icons.LayoutAdvancedAxialPrimary`
`layout-advanced-mpr`	`LayoutAdvancedMPR`	`Icons.LayoutAdvancedMPR`
`layout-common-1x1`	`LayoutCommon1x1`	`Icons.LayoutCommon1x1`
`layout-common-1x2`	`LayoutCommon1x2`	`Icons.LayoutCommon1x2`
`layout-common-2x2`	`LayoutCommon2x2`	`Icons.LayoutCommon2x2`
`layout-common-2x3`	`LayoutCommon2x3`	`Icons.LayoutCommon2x3`
`illustration-investigational-use`	`InvestigationalUse`	`Icons.InvestigationalUse`

20 KiB Raw Blame History