Use ToolUtilities.defineIcon to define icons

.changeset/five-icons-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@itwin/appui-react": minor
+---
+
+Use `ToolUtilities.defineIcon` to define icons for `RotateViewTool` and `ViewToggleCameraTool` tools.

ui/appui-react/src/appui-react.ts

@@ -857,6 +857,7 @@ import { UiFramework } from "./appui-react/UiFramework.js";
 import { DefaultToolSettingsProvider } from "./appui-react/toolsettings/DefaultToolSettingsProvider.js";
 import { IModelViewportControl } from "./appui-react/content/IModelViewport.js";
 import { registerEditors } from "./appui-react/editors/registerEditors.js";
+import { defineToolIcons } from "./appui-react/tools/defineToolIcons.js";
 
 UiFramework.controls.register(
   "DefaultToolSettings",
@@ -865,6 +866,7 @@ UiFramework.controls.register(
 UiFramework.controls.register(IModelViewportControl.id, IModelViewportControl);
 
 registerEditors();
+defineToolIcons();
 
 // #endregion "SideEffects"
 

ui/appui-react/src/appui-react/tools/CoreToolDefinitions.tsx

@@ -35,26 +35,16 @@ import {
   ConditionalStringValue,
 } from "@itwin/appui-abstract";
 import { ToolUtilities } from "@itwin/imodel-components-react";
-import {
-  SvgCameraAnimation,
-  SvgCameraAnimationDisabled,
-} from "@itwin/itwinui-icons-react";
 import { getIsHiddenIfSelectionNotActive } from "../selection/SelectionContextItemDef.js";
 import { CommandItemDef } from "../shared/CommandItemDef.js";
 import { ToolItemDef } from "../shared/ToolItemDef.js";
 import { SyncUiEventId } from "../syncui/UiSyncEvent.js";
 import { GroupItemDef } from "../toolbar/GroupItem.js";
 import { RestoreFrontstageLayoutTool } from "./RestoreLayoutTool.js";
 import { UiFramework } from "../UiFramework.js";
-import { SvgGyroscope } from "../icons/SvgGyroscope.js";
 import { SvgSectionTool } from "../icons/SvgSectionTool.js";
 import { SvgSelectionClear } from "../icons/SvgSelectionClear.js";
-import {
-  SvgMeasure,
-  SvgProcess,
-  SvgRotateLeft,
-} from "@itwin/itwinui-icons-react";
-import { ConditionalIconItem } from "@itwin/core-react";
+import { SvgMeasure, SvgProcess } from "@itwin/itwinui-icons-react";
 import type { ToolbarItems } from "./ToolbarItems.js";
 import { getActiveViewport } from "../utils/getActiveViewport.js";
 import type { ToolItemProps } from "../shared/ItemProps.js";
@@ -122,15 +112,6 @@ export class CoreTools {
 
   public static get rotateViewCommand() {
     return createForTool(RotateViewTool, {
-      icon: new ConditionalIconItem(() => {
-        const viewport = getActiveViewport();
-        if (viewport?.view.is2d()) return <SvgRotateLeft />;
-        return <SvgGyroscope />;
-      }, [
-        SyncUiEventId.ActiveContentChanged,
-        SyncUiEventId.ActiveViewportChanged,
-        SyncUiEventId.ViewStateChanged,
-      ]),
       execute: async () =>
         IModelApp.tools.run(
           RotateViewTool.toolId,
@@ -167,18 +148,6 @@ export class CoreTools {
 
   public static get toggleCameraViewCommand() {
     return createForTool(ViewToggleCameraTool, {
-      iconSpec: new ConditionalIconItem(() => {
-        const viewport = getActiveViewport();
-        if (viewport?.view.is3d() && viewport?.isCameraOn) {
-          return <SvgCameraAnimation />;
-        }
-
-        return <SvgCameraAnimationDisabled />;
-      }, [
-        SyncUiEventId.ActiveContentChanged,
-        SyncUiEventId.ActiveViewportChanged,
-        SyncUiEventId.ViewStateChanged,
-      ]),
       label: new ConditionalStringValue(() => {
         const viewport = getActiveViewport();
         if (viewport?.view.is3d() && viewport?.isCameraOn) {

ui/appui-react/src/appui-react/tools/defineToolIcons.tsx

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from "react";
+import { RotateViewTool, ViewToggleCameraTool } from "@itwin/core-frontend";
+import { ToolUtilities } from "@itwin/imodel-components-react";
+import {
+  SvgCameraAnimation,
+  SvgCameraAnimationDisabled,
+  SvgRotateLeft,
+} from "@itwin/itwinui-icons-react";
+import { useConditionalValue } from "../hooks/useConditionalValue.js";
+import { getActiveViewport } from "../utils/getActiveViewport.js";
+import { SyncUiEventId } from "../syncui/UiSyncEvent.js";
+import { SvgGyroscope } from "../icons/SvgGyroscope.js";
+
+import type { ToolType } from "@itwin/core-frontend";
+
+/** @internal */
+export function defineToolIcons() {
+  defineIcon(RotateViewTool, <RotateViewIcon />);
+  defineIcon(ViewToggleCameraTool, <ToggleCameraViewIcon />);
+}
+
+function defineIcon(toolType: ToolType, icon: React.ReactElement) {
+  if (ToolUtilities.isWithIcon(toolType)) return;
+  ToolUtilities.defineIcon(toolType, icon);
+}
+
+function RotateViewIcon() {
+  const is2d = useConditionalValue(() => {
+    const viewport = getActiveViewport();
+    return viewport?.view.is2d() ?? false;
+  }, [
+    SyncUiEventId.ActiveContentChanged,
+    SyncUiEventId.ActiveViewportChanged,
+    SyncUiEventId.ViewStateChanged,
+  ]);
+
+  return is2d ? <SvgRotateLeft /> : <SvgGyroscope />;
+}
+
+function ToggleCameraViewIcon() {
+  const cameraEnabled = useConditionalValue(() => {
+    const viewport = getActiveViewport();
+    return viewport?.view.is3d() && viewport?.isCameraOn;
+  }, [
+    SyncUiEventId.ActiveContentChanged,
+    SyncUiEventId.ActiveViewportChanged,
+    SyncUiEventId.ViewStateChanged,
+  ]);
+
+  return cameraEnabled ? (
+    <SvgCameraAnimation />
+  ) : (
+    <SvgCameraAnimationDisabled />
+  );
+}