feat(free-demo): beautify tools icon style

apps/demo-free-layout/src/assets/icon-auto-layout.tsx

@@ -0,0 +1,8 @@
+export const IconAutoLayout = (
+<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+  fill="currentColor"
+    d="M3 2C2.44772 2 2 2.44771 2 3V12C2 12.5523 2.44772 13 3 13H10C10.5523 13 11 12.5523 11 12V3C11 2.44772 10.5523 2 10 2H3zM4 11V4H9V11H4zM21 22C21.5523 22 22 21.5523 22 21V12C22 11.4477 21.5523 11 21 11H14C13.4477 11 13 11.4477 13 12V21C13 21.5523 13.4477 22 14 22H21zM20 13V20H15V13H20zM2 16C2 15.4477 2.44772 15 3 15H10C10.5523 15 11 15.4477 11 16V21C11 21.5523 10.5523 22 10 22H3C2.44772 22 2 21.5523 2 21V16zM4 20V17H9V20H4zM21 9C21.5523 9 22 8.55228 22 8V3C22 2.44772 21.5523 2 21 2H14C13.4477 2 13 2.44772 13 3V8C13 8.55228 13.4477 9 14 9H21zM20 4V7H15V4H20z"
+  ></path>
+</svg>
+  )

apps/demo-free-layout/src/assets/icon-minimap.tsx

@@ -0,0 +1,6 @@
+export const IconMinimap = () => <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<g id="g1">
+    <path id="path1" fill="#000000" stroke="none" d="M 18.09091 6.883101 L 5.409091 6.883101 L 5.409091 16.746737 L 10.664648 16.746737 C 10.927091 17.116341 11.30353 17.422749 11.792977 17.611004 L 12.664289 17.946156 L 12.744959 18.155828 L 5.409091 18.155828 C 4.630871 18.155828 4 17.524979 4 16.746737 L 4 6.883101 C 4 6.104881 4.630871 5.47401 5.409091 5.47401 L 18.09091 5.47401 C 18.86915 5.47401 19.5 6.104881 19.5 6.883101 L 19.5 12.52348 C 19.247208 11.883823 18.730145 11.365912 18.09091 11.111994 L 18.09091 6.883101 Z M 18.09091 18.155828 L 17.881165 18.155828 L 19.469212 14.368896 C 19.479921 14.343321 19.490206 14.317817 19.5 14.292241 L 19.5 16.746737 C 19.5 17.524979 18.86915 18.155828 18.09091 18.155828 Z"/>
+    <path id="path2" fill="#000000" fill-rule="evenodd" stroke="none" d="M 18.494614 13.960189 C 18.982441 12.796985 17.813459 11.628003 16.650255 12.11576 L 12.133272 14.01 C 10.962248 14.501069 10.987188 16.168798 12.172375 16.62464 L 13.482055 17.128389 L 13.985805 18.438068 C 14.441646 19.623184 16.109375 19.648125 16.600443 18.477171 L 18.494614 13.960189 Z M 17.19515 13.415224 L 15.30098 17.932205 L 14.79723 16.622526 C 14.654066 16.250385 14.359989 15.956307 13.987918 15.813213 L 12.678168 15.309464 L 17.19515 13.415224 Z"/>
+</g>
+</svg>

apps/demo-free-layout/src/assets/icon-mouse.tsx

@@ -1,4 +1,4 @@
-export function MouseIcon(props: { width?: number; height?: number }) {
+export function IconMouse(props: { width?: number; height?: number }) {
   const { width, height } = props;
   return (
     <svg
@@ -19,4 +19,5 @@ export function MouseIcon(props: { width?: number; height?: number }) {
   );
 }
 
-export const MouseToolIcon = () =><svg  width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 8C4.5 4.13401 7.63401 1 11.5 1H12.5C16.366 1 19.5 4.13401 19.5 8V17C19.5 20.3137 16.8137 23 13.5 23H10.5C7.18629 23 4.5 20.3137 4.5 17V8ZM11.2517 3.00606C8.60561 3.13547 6.5 5.32184 6.5 8V17C6.5 19.2091 8.29086 21 10.5 21H13.5C15.7091 21 17.5 19.2091 17.5 17V8C17.5 5.32297 15.3962 3.13732 12.7517 3.00622V5.28013C13.2606 5.54331 13.6074 6.06549 13.6074 6.66669V8.75759C13.6074 9.35879 13.2606 9.88097 12.7517 10.1441V11.4091C12.7517 11.8233 12.4159 12.1591 12.0017 12.1591C11.5875 12.1591 11.2517 11.8233 11.2517 11.4091V10.1457C10.7411 9.88298 10.3931 9.35994 10.3931 8.75759V6.66669C10.3931 6.06433 10.7411 5.5413 11.2517 5.27862V3.00606ZM12.0017 6.14397C11.7059 6.14397 11.466 6.38381 11.466 6.67968V8.74462C11.466 9.03907 11.7036 9.27804 11.9975 9.28031L12.0002 9.28032C12.0456 9.28032 12.0896 9.27482 12.1316 9.26447C12.3401 9.21256 12.5002 9.0386 12.5318 8.82287C12.5345 8.80149 12.5359 8.7797 12.5359 8.75759V6.66669C12.5359 6.64463 12.5345 6.62288 12.5318 6.60154C12.4999 6.38354 12.3368 6.20817 12.1252 6.15826C12.0856 6.14891 12.0442 6.14397 12.0017 6.14397Z"></path></svg>
+export const IconMouseTool = () =><svg  width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 8C4.5 4.13401 7.63401 1 11.5 1H12.5C16.366 1 19.5 4.13401 19.5 8V17C19.5 20.3137 16.8137 23 13.5 23H10.5C7.18629 23 4.5 20.3137 4.5 17V8ZM11.2517 3.00606C8.60561 3.13547 6.5 5.32184 6.5 8V17C6.5 19.2091 8.29086 21 10.5 21H13.5C15.7091 21 17.5 19.2091 17.5 17V8C17.5 5.32297 15.3962 3.13732 12.7517 3.00622V5.28013C13.2606 5.54331 13.6074 6.06549 13.6074 6.66669V8.75759C13.6074 9.35879 13.2606 9.88097 12.7517 10.1441V11.4091C12.7517 11.8233 12.4159 12.1591 12.0017 12.1591C11.5875 12.1591 11.2517 11.8233 11.2517 11.4091V10.1457C10.7411 9.88298 10.3931 9.35994 10.3931 8.75759V6.66669C10.3931 6.06433 10.7411 5.5413 11.2517 5.27862V3.00606ZM12.0017 6.14397C11.7059 6.14397 11.466 6.38381 11.466 6.67968V8.74462C11.466 9.03907 11.7036 9.27804 11.9975 9.28031L12.0002 9.28032C12.0456 9.28032 12.0896 9.27482 12.1316 9.26447C12.3401 9.21256 12.5002 9.0386 12.5318 8.82287C12.5345 8.80149 12.5359 8.7797 12.5359 8.75759V6.66669C12.5359 6.64463 12.5345 6.62288 12.5318 6.60154C12.4999 6.38354 12.3368 6.20817 12.1252 6.15826C12.0856 6.14891 12.0442 6.14397 12.0017 6.14397Z"></path></svg>

apps/demo-free-layout/src/assets/icon-pad.tsx

@@ -1,4 +1,4 @@
-export function PadIcon(props: { width?: number; height?: number }) {
+export function IconPad(props: { width?: number; height?: number }) {
   const { width, height } = props;
   return (
     <svg
@@ -29,4 +29,4 @@ export function PadIcon(props: { width?: number; height?: number }) {
   );
 }
 
-export const PadToolIcon = () => <svg  width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.8549 5H3.1451C3.06496 5 3 5.06496 3 5.1451V18.8549C3 18.935 3.06496 19 3.1451 19H20.8549C20.935 19 21 18.935 21 18.8549V5.1451C21 5.06496 20.935 5 20.8549 5ZM3.1451 3C1.96039 3 1 3.96039 1 5.1451V18.8549C1 20.0396 1.96039 21 3.1451 21H20.8549C22.0396 21 23 20.0396 23 18.8549V5.1451C23 3.96039 22.0396 3 20.8549 3H3.1451Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.99991 16C6.99991 15.4477 7.44762 15 7.99991 15H15.9999C16.5522 15 16.9999 15.4477 16.9999 16C16.9999 16.5523 16.5522 17 15.9999 17H7.99991C7.44762 17 6.99991 16.5523 6.99991 16Z"></path></svg>
+export const IconPadTool = () => <svg  width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.8549 5H3.1451C3.06496 5 3 5.06496 3 5.1451V18.8549C3 18.935 3.06496 19 3.1451 19H20.8549C20.935 19 21 18.935 21 18.8549V5.1451C21 5.06496 20.935 5 20.8549 5ZM3.1451 3C1.96039 3 1 3.96039 1 5.1451V18.8549C1 20.0396 1.96039 21 3.1451 21H20.8549C22.0396 21 23 20.0396 23 18.8549V5.1451C23 3.96039 22.0396 3 20.8549 3H3.1451Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.99991 16C6.99991 15.4477 7.44762 15 7.99991 15H15.9999C16.5522 15 16.9999 15.4477 16.9999 16C16.9999 16.5523 16.5522 17 15.9999 17H7.99991C7.44762 17 6.99991 16.5523 6.99991 16Z"></path></svg>

apps/demo-free-layout/src/assets/icon-switch-line.tsx

@@ -0,0 +1,5 @@
+export const IconSwitchLine = (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path id="switch-line" fill="currentColor" stroke="none" d="M 12.728118 10.060962 C 13.064282 8.716098 14.272528 7.772551 15.65877 7.772343 L 17.689898 7.772343 C 18.0798 7.772343 18.39588 7.456264 18.39588 7.066362 C 18.39588 6.676458 18.0798 6.36038 17.689898 6.36038 L 15.659616 6.36038 C 13.62515 6.360315 11.851767 7.745007 11.358504 9.718771 C 11.02234 11.063635 9.814095 12.007183 8.427853 12.007389 L 7.101437 12.007389 C 6.711768 12.007389 6.395878 12.323277 6.395878 12.712947 C 6.395878 13.102616 6.711768 13.418506 7.101437 13.418506 L 8.426159 13.418506 C 9.812716 13.418323 11.021417 14.361954 11.357657 15.707124 C 11.850921 17.680887 13.624304 19.065578 15.65877 19.065516 L 17.689049 19.065516 C 18.078953 19.065516 18.395033 18.749435 18.395033 18.359533 C 18.395033 17.969631 18.078953 17.653551 17.689049 17.653551 L 15.65877 17.653551 C 14.272528 17.653345 13.064282 16.709797 12.728118 15.364932 C 12.454905 14.27114 11.774856 13.322707 10.826583 12.712947 C 11.774536 12.10303 12.454268 11.154617 12.727271 10.060962 Z"/>
+  </svg>
+  )

apps/demo-free-layout/src/components/tools/auto-layout.tsx

@@ -2,16 +2,9 @@ import { useCallback } from 'react';
 
 import { usePlayground, usePlaygroundTools } from '@flowgram.ai/free-layout-editor';
 import { IconButton, Tooltip } from '@douyinfe/semi-ui';
+import { IconAutoLayout } from '../../assets/icon-auto-layout';
+
 
-const icon = (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3 2C2.44772 2 2 2.44771 2 3V12C2 12.5523 2.44772 13 3 13H10C10.5523 13 11 12.5523 11 12V3C11 2.44772 10.5523 2 10 2H3zM4 11V4H9V11H4zM21 22C21.5523 22 22 21.5523 22 21V12C22 11.4477 21.5523 11 21 11H14C13.4477 11 13 11.4477 13 12V21C13 21.5523 13.4477 22 14 22H21zM20 13V20H15V13H20zM2 16C2 15.4477 2.44772 15 3 15H10C10.5523 15 11 15.4477 11 16V21C11 21.5523 10.5523 22 10 22H3C2.44772 22 2 21.5523 2 21V16zM4 20V17H9V20H4zM21 9C21.5523 9 22 8.55228 22 8V3C22 2.44772 21.5523 2 21 2H14C13.4477 2 13 2.44772 13 3V8C13 8.55228 13.4477 9 14 9H21zM20 4V7H15V4H20z"
-    ></path>
-  </svg>
-);
 
 export const AutoLayout = () => {
   const tools = usePlaygroundTools();
@@ -20,15 +13,12 @@ export const AutoLayout = () => {
     await tools.autoLayout();
   }, [tools]);
 
-  if (playground.config.readonly) {
-    return <></>;
-  }
-
   return (
     <Tooltip content={'Auto Layout'}>
       <IconButton
+        disabled={playground.config.readonly}
         type="tertiary"
-        theme="borderless" onClick={autoLayout} icon={icon} />
+        theme="borderless" onClick={autoLayout} icon={IconAutoLayout} />
     </Tooltip>
   );
 };

apps/demo-free-layout/src/components/tools/minimap-switch.tsx

@@ -1,6 +1,6 @@
 import { Tooltip, IconButton } from '@douyinfe/semi-ui';
 
-import { UIIconGridRectangle } from './styles';
+import { UIIconMinimap } from './styles';
 
 export const MinimapSwitch = (props: {
   minimapVisible: boolean;
@@ -13,7 +13,7 @@ export const MinimapSwitch = (props: {
       <IconButton
         type="tertiary"
         theme="borderless"
-        icon={<UIIconGridRectangle visible={minimapVisible} />}
+        icon={<UIIconMinimap visible={minimapVisible} />}
         onClick={() => setMinimapVisible(!minimapVisible)}
       />
     </Tooltip>

apps/demo-free-layout/src/components/tools/mouse-pad-selector.tsx

@@ -2,8 +2,8 @@ import React, { type CSSProperties, useState } from 'react';
 
 import { Popover, Typography } from '@douyinfe/semi-ui';
 
-import { PadIcon, PadToolIcon } from '../../assets/icon-pad';
-import { MouseIcon, MouseToolIcon } from '../../assets/icon-mouse';
+import { IconPad, IconPadTool } from '../../assets/icon-pad';
+import { IconMouse, IconMouseTool } from '../../assets/icon-mouse';
 
 import './mouse-pad-selector.less';
 
@@ -83,7 +83,7 @@ export const MousePadSelector: React.FC<
               subTitle={'Drag the canvas with the left mouse button, zoom with the scroll wheel.'}
               value={InteractiveType.Mouse}
               selected={value === InteractiveType.Mouse}
-              icon={<MouseIcon />}
+              icon={<IconMouse />}
               onChange={onChange}
             />
 
@@ -94,7 +94,7 @@ export const MousePadSelector: React.FC<
               }
               value={InteractiveType.Pad}
               selected={value === InteractiveType.Pad}
-              icon={<PadIcon />}
+              icon={<IconPad />}
               onChange={onChange}
             />
           </div>
@@ -109,7 +109,7 @@ export const MousePadSelector: React.FC<
         style={containerStyle}
       >
         <div className={'ui-mouse-pad-selector-icon'} style={iconStyle}>
-          {isMouse ? <MouseToolIcon /> : <PadToolIcon />}
+          {isMouse ? <IconMouseTool /> : <IconPadTool />}
         </div>
       </div>
     </Popover>

apps/demo-free-layout/src/components/tools/readonly.tsx

@@ -10,8 +10,8 @@ export const Readonly = () => {
     playground.config.readonly = !playground.config.readonly;
   }, [playground]);
   return playground.config.readonly ? (
-    <IconButton theme="borderless" type="tertiary" icon={<IconLock />} onClick={toggleReadonly} />
+    <IconButton theme="borderless" type="tertiary" icon={<IconLock size='default' />} onClick={toggleReadonly} />
   ) : (
-    <IconButton theme="borderless" type="tertiary" icon={<IconUnlock />} onClick={toggleReadonly} />
+    <IconButton theme="borderless" type="tertiary" icon={<IconUnlock size='default' />} onClick={toggleReadonly} />
   );
 };

apps/demo-free-layout/src/components/tools/styles.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { IconGridRectangle } from '@douyinfe/semi-icons';
+import { IconMinimap } from '../../assets/icon-minimap';
 
 export const ToolContainer = styled.div`
   position: absolute;
@@ -41,6 +41,6 @@ export const MinimapContainer = styled.div`
   width: 182px;
 `;
 
-export const UIIconGridRectangle = styled(IconGridRectangle)<{ visible: boolean }>`
+export const UIIconMinimap = styled(IconMinimap)<{ visible: boolean }>`
   color: ${props => (props.visible ? undefined : '#060709cc')};
 `;

apps/demo-free-layout/src/components/tools/switch-line.tsx

@@ -6,12 +6,7 @@ import {
     WorkflowLinesManager,
 } from '@flowgram.ai/free-layout-editor'
 import { IconButton, Tooltip } from '@douyinfe/semi-ui'
-
-const icon = (
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path id="path1" fill="#000000" stroke="none" d="M 12.728118 10.060962 C 13.064282 8.716098 14.272528 7.772551 15.65877 7.772343 L 17.689898 7.772343 C 18.0798 7.772343 18.39588 7.456264 18.39588 7.066362 C 18.39588 6.676458 18.0798 6.36038 17.689898 6.36038 L 15.659616 6.36038 C 13.62515 6.360315 11.851767 7.745007 11.358504 9.718771 C 11.02234 11.063635 9.814095 12.007183 8.427853 12.007389 L 7.101437 12.007389 C 6.711768 12.007389 6.395878 12.323277 6.395878 12.712947 C 6.395878 13.102616 6.711768 13.418506 7.101437 13.418506 L 8.426159 13.418506 C 9.812716 13.418323 11.021417 14.361954 11.357657 15.707124 C 11.850921 17.680887 13.624304 19.065578 15.65877 19.065516 L 17.689049 19.065516 C 18.078953 19.065516 18.395033 18.749435 18.395033 18.359533 C 18.395033 17.969631 18.078953 17.653551 17.689049 17.653551 L 15.65877 17.653551 C 14.272528 17.653345 13.064282 16.709797 12.728118 15.364932 C 12.454905 14.27114 11.774856 13.322707 10.826583 12.712947 C 11.774536 12.10303 12.454268 11.154617 12.727271 10.060962 Z"/>
-</svg>
-)
+import { IconSwitchLine } from '../../assets/icon-switch-line'
 
 export const SwitchLine = () => {
     const playground = usePlayground()
@@ -20,15 +15,13 @@ export const SwitchLine = () => {
         linesManager.switchLineType();
     }, [linesManager])
 
-    if (playground.config.readonly) {
-        return <></>
-    }
 
     return (
         <Tooltip content={'Switch Line'}>
             <IconButton
+                disabled={playground.config.readonly}
         type="tertiary"
-        theme="borderless" onClick={switchLine} icon={icon} />
+        theme="borderless" onClick={switchLine} icon={IconSwitchLine} />
         </Tooltip>
     )
 }