fix add align icon

libs/components/board-draw/src/components/align-panel/index.tsx

@@ -7,7 +7,7 @@ interface AlignObject {
      * color: none means no color
      */
     title: string;
-    icon?: string;
+    icon?: JSX.Element;
 }
 /**
  * ColorValue : none means no color
@@ -35,7 +35,7 @@ export const AlignPanel = ({
                                 onSelect?.(option);
                             }}
                         >
-                            {alignOption.name}
+                            {alignOption.icon}
                         </SelectableContainer>
                     </Tooltip>
                 );

libs/components/board-draw/src/components/command-panel/AlignOperation.tsx

@@ -1,6 +1,14 @@
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
-import { ShapeColorNoneIcon } from '@toeverything/components/icons';
+import {
+    AlignHorizontalCenterIcon,
+    AlignIcon,
+    AlignToBottomIcon,
+    AlignToLeftIcon,
+    AlignToRightIcon,
+    AlignToTopIcon,
+    AlignVerticalCenterIcon,
+} from '@toeverything/components/icons';
 import {
     IconButton,
     Popover,
@@ -8,7 +16,6 @@ import {
     useTheme,
 } from '@toeverything/components/ui';
 import { AlignPanel } from '../align-panel';
-
 interface BorderColorConfigProps {
     app: TldrawApp;
     shapes: TDShape[];
@@ -27,22 +34,32 @@ let AlignPanelArr = [
     {
         name: 'top',
         title: 'Align top',
+        icon: <AlignToTopIcon></AlignToTopIcon>,
     },
     {
         name: 'centerVertical',
         title: 'Align Center Vertical',
+        icon: <AlignVerticalCenterIcon></AlignVerticalCenterIcon>,
     },
     {
         name: 'bottom',
         title: 'Align bottom',
+        icon: <AlignToBottomIcon></AlignToBottomIcon>,
     },
     {
         name: 'left',
         title: 'Align left',
+        icon: <AlignToLeftIcon></AlignToLeftIcon>,
+    },
+    {
+        name: 'right',
+        title: 'Align right',
+        icon: <AlignToRightIcon></AlignToRightIcon>,
     },
     {
         name: 'centerHorizontal',
         title: 'Align centerHorizontal',
+        icon: <AlignHorizontalCenterIcon></AlignHorizontalCenterIcon>,
     },
 ];
 export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
@@ -64,7 +81,7 @@ export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
         >
             <Tooltip content="Fill Color" placement="top-start">
                 <IconButton>
-                    <ShapeColorNoneIcon />
+                    <AlignIcon />
                 </IconButton>
             </Tooltip>
         </Popover>