Changed the icons in the toolbar

src/Components/SVG/SVG.tsx

@@ -8,7 +8,7 @@ import { SymbolLayer } from './Elements/SymbolLayer';
 import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { DimensionLayer } from './Elements/DimensionLayer';
 import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol';
-import { Toolbar } from './SVGReactPanZoom/ui-toolbar/Toolbar';
+import { Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar';
 
 interface ISVGProps {
   className?: string

src/Components/SVG/SVGReactPanZoom/ui-toolbar/icon-cursor.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-// credits https://materialdesignicons.com/icon/cursor-default-outline
-
-export function IconCursor(): JSX.Element {
-  return (
-    <svg width={24} height={24} stroke="currentColor">
-      <path
-        d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"/>
-    </svg>
-  );
-}

src/Components/SVG/SVGReactPanZoom/ui-toolbar/icon-fit.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-//credits https://materialdesignicons.com/icon/cursor-default-outline
-
-export function IconFit(): JSX.Element {
-  return (
-    <svg width={24} height={24} stroke="currentColor">
-      <path
-        d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6z"/>
-    </svg>
-  );
-}

src/Components/SVG/SVGReactPanZoom/ui-toolbar/icon-pan.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-//https://materialdesignicons.com/icon/cursor-move
-
-export function IconPan(): JSX.Element {
-  return (
-    <svg width={24} height={24} stroke="currentColor">
-      <path
-        d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"/>
-    </svg>
-  );
-}

src/Components/SVG/SVGReactPanZoom/ui-toolbar/icon-zoom-in.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-//https://material.io/icons/#ic_zoom_in
-
-export function IconZoomIn(): JSX.Element {
-  return (
-    <svg width={24} height={24} stroke="currentColor">
-      <g>
-        <path
-          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-        <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
-      </g>
-    </svg>
-  );
-}

src/Components/SVG/SVGReactPanZoom/ui-toolbar/icon-zoom-out.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-//https://material.io/icons/#ic_zoom_out
-
-export function IconZoomOut(): JSX.Element {
-  return (
-    <svg width={24} height={24} stroke="currentColor">
-      <path
-        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/>
-    </svg>
-  )
-}

src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar.tsx

@@ -1,3 +1,4 @@
+import { ArrowsPointingOutIcon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 
 import {
@@ -19,11 +20,6 @@ import {
   type ALIGN_RIGHT,
   type ToolbarPosition
 } from 'react-svg-pan-zoom';
-import { IconCursor } from './icon-cursor';
-import { IconFit } from './icon-fit';
-import { IconPan } from './icon-pan';
-import { IconZoomIn } from './icon-zoom-in';
-import { IconZoomOut } from './icon-zoom-out';
 import { ToolbarButton } from './toolbar-button';
 
 interface IToolbarProps {
@@ -87,7 +83,7 @@ export function Toolbar({
         name="unselect-tools"
         title="Selection"
         onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_NONE); } }>
-        <IconCursor/>
+        <CursorArrowRaysIcon/>
       </ToolbarButton>
 
       <ToolbarButton
@@ -97,7 +93,7 @@ export function Toolbar({
         name="select-tool-pan"
         title="Pan"
         onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_PAN); } }>
-        <IconPan/>
+        <HandRaisedIcon/>
       </ToolbarButton>
 
       <ToolbarButton
@@ -107,7 +103,7 @@ export function Toolbar({
         name="select-tool-zoom-in"
         title="Zoom in"
         onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_ZOOM_IN); } }>
-        <IconZoomIn/>
+        <MagnifyingGlassPlusIcon/>
       </ToolbarButton>
 
       <ToolbarButton
@@ -117,7 +113,7 @@ export function Toolbar({
         name="select-tool-zoom-out"
         title="Zoom out"
         onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_ZOOM_OUT); } }>
-        <IconZoomOut/>
+        <MagnifyingGlassMinusIcon/>
       </ToolbarButton>
 
       <ToolbarButton
@@ -127,7 +123,7 @@ export function Toolbar({
         name="fit-to-viewer"
         title="Fit to viewer"
         onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleFit(event); } }>
-        <IconFit/>
+        <ArrowsPointingOutIcon/>
       </ToolbarButton>
     </div>
   );