processed icons with MultiIcon passed object

Author: Imiss-U1025

client/packages/lowcoder-design/src/components/CustomModal.tsx

@@ -9,6 +9,7 @@ import { DarkActiveTextColor, GreyTextColor } from "constants/style";
 import { trans } from "i18n/design";
 import { modalInstance } from "components/GlobalInstances";
 import {MultiIconDisplay} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {CloseIcon, ErrorIcon, SuccessIcon, WarningIcon, WarningWhiteIcon} from "../icons";
 
 type ModalWrapperProps = {
   $width?: string | number;
@@ -130,7 +131,7 @@ function ModalHeader(props: {
       )}
       <ModalHeaderTitle>{props.title}</ModalHeaderTitle>
       <ModalCloseIcon onClick={props.onCancel}>
-        <MultiIconDisplay identifier="/icon:svg/CloseIcon" />
+        <MultiIconDisplay identifier={CloseIcon} />
       </ModalCloseIcon>
     </>
   );
@@ -264,10 +265,10 @@ function CustomModal(props: CustomModalProps) {
 }
 
 const TitleIcon = {
-  error: <MultiIconDisplay identifier="/icon:svg/ErrorIcon" />,
-  warn: <MultiIconDisplay identifier="/icon:svg/WarningIcon" />,
-  info: <MultiIconDisplay identifier="/icon:svg/WarningWhiteIcon" />,
-  success: <MultiIconDisplay identifier="/icon:svg/SuccessIcon" />,
+  error: <MultiIconDisplay identifier={ErrorIcon} />,
+  warn: <MultiIconDisplay identifier={WarningIcon} />,
+  info: <MultiIconDisplay identifier={WarningWhiteIcon} />,
+  success: <MultiIconDisplay identifier={SuccessIcon} />,
 };
 
 CustomModal.confirm = (props: {

client/packages/lowcoder-design/src/components/ExternalLink.tsx

@@ -1,6 +1,7 @@
 import { ActiveTextColor, GreyTextColor } from "constants/style";
 import styled from "styled-components";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {DocIcon} from "../icons";
 
 export const ExternalLink = styled.a`
   font-size: 13px;
@@ -14,7 +15,7 @@ export const ExternalLink = styled.a`
   }
 `;
 
-const StyledDocIcon = styled(MultiIcon("/icon:svg/DocIcon"))`
+const StyledDocIcon = styled(MultiIcon(DocIcon))`
   height: 12px;
   width: 12px;
   margin-right: 4px;

client/packages/lowcoder-design/src/components/MenuItem.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { labelCss } from "./Label";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {DragIcon, PencilIcon, PointIcon} from "../icons";
 
 interface IItem {
   $width?: number;
@@ -26,7 +27,7 @@ const IconCss = css`
     cursor: pointer;
   }
 `;
-const StyledDragIcon = styled(MultiIcon("/icon:svg/DragIcon"))`
+const StyledDragIcon = styled(MultiIcon(DragIcon))`
   ${IconCss}
   margin-left: 12px;
   margin-top: 8px;
@@ -79,12 +80,12 @@ const GrayText = styled.span`
   color: #8b8fa3;
   margin-left: 8px;
 `;
-const StyledPencilIcon = styled(MultiIcon("/icon:svg/PencilIcon"))`
+const StyledPencilIcon = styled(MultiIcon(PencilIcon))`
   ${IconCss}
   margin-top: 8px;
   float: right;
 `;
-const StyledPointIcon = styled(MultiIcon("/icon:svg/PointIcon"))`
+const StyledPointIcon = styled(MultiIcon(PointIcon))`
   ${IconCss}
   margin-left: 16px;
   margin-top: 8px;

client/packages/lowcoder-design/src/components/eventHandler.tsx

@@ -4,6 +4,7 @@ import { LinkButton } from "./button";
 import { ReactNode } from "react";
 import { trans } from "i18n/design";
 import {MultiIcon, MultiIconDisplay} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {BluePlusIcon} from "../icons";
 
 const InlineEventFormWrapper = styled.div`
   display: flex;
@@ -112,11 +113,11 @@ const AddLine = (props: { title: ReactNode; add: () => void }) => {
   return (
     <TitleDiv>
       <TitleSpan>{props.title}</TitleSpan>
-      <LinkButton icon={<MultiIconDisplay identifier="/icon:svg/BluePlusIcon" />} text={trans("addItem")} onClick={props.add} />
+      <LinkButton icon={<MultiIconDisplay identifier={BluePlusIcon} />} text={trans("addItem")} onClick={props.add} />
     </TitleDiv>
   );
 };
-const Blueplus = MultiIcon("/icon:svg/BluePlusIcon")
+const Blueplus = MultiIcon(BluePlusIcon)
 export {
   Blueplus as AddEventIcon,
   EventDiv,

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -21,6 +21,7 @@ import { default as List, type ListRowProps } from "react-virtualized/dist/es/Li
 import styled from "styled-components";
 import { ANTDICON } from "icons/antIcon";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {CloseIcon, SearchIcon} from "../../icons";
 
 const PopupContainer = styled.div`
   width: 580px;
@@ -42,7 +43,7 @@ const TitleText = styled.span`
   color: #222222;
   line-height: 16px;
 `;
-const StyledCloseIcon = styled(MultiIcon("/icon:svg/CloseIcon"))`
+const StyledCloseIcon = styled(MultiIcon(CloseIcon))`
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -60,7 +61,7 @@ const SearchDiv = styled.div`
   display: flex;
   justify-content: space-between;
 `;
-const StyledSearchIcon = styled(MultiIcon("/icon:svg/SearchIcon"))`
+const StyledSearchIcon = styled(MultiIcon(SearchIcon))`
   position: absolute;
   top: 6px;
   left: 12px;

client/packages/lowcoder-design/src/components/keyValueList.tsx

@@ -4,6 +4,7 @@ import { TacoButton } from "./button";
 import { ReactNode } from "react";
 import { trans } from "i18n/design";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {BluePlusIcon} from "../icons";
 
 const KeyValueListItem = styled.div`
   display: flex;
@@ -33,7 +34,7 @@ const DelIcon = styled(Bin)<{
   }
 `;
 
-const AddIcon = styled(MultiIcon("/icon:svg/BluePlusIcon"))`
+const AddIcon = styled(MultiIcon(BluePlusIcon))`
   height: 8px;
   width: 8px;
   margin-right: 4px;

client/packages/lowcoder-design/src/components/option.tsx

@@ -13,6 +13,7 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { ActiveTextColor, GreyTextColor } from "constants/style";
 import { trans } from "i18n/design";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {DragIcon, PointIcon} from "../icons";
 
 const OptionDiv = styled.div`
   width: 100%;
@@ -103,7 +104,7 @@ const EmptyOptionSpan = styled.span`
   }
 `;
 
-const StyledDragIcon = styled(MultiIcon("/icon:svg/DragIcon"))`
+const StyledDragIcon = styled(MultiIcon(DragIcon))`
   ${IconCss};
   margin-top: 8px;
   margin-left: 8px;
@@ -120,7 +121,7 @@ const StyledDragIcon = styled(MultiIcon("/icon:svg/DragIcon"))`
   }
 `;
 
-const StyledPointIcon = styled(MultiIcon("/icon:svg/PointIcon"))`
+const StyledPointIcon = styled(MultiIcon(PointIcon))`
   ${IconCss};
   color: ${GreyTextColor};
 

client/packages/lowcoder-design/src/components/popover.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { ActiveTextColor, GreyTextColor } from "constants/style";
 import { trans } from "i18n/design";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {PointIcon} from "../icons";
 
 const Wedge = styled.div`
   height: 8px;
@@ -36,7 +37,7 @@ const Handle = styled.div`
   }
 `;
 
-const StyledPointIcon = styled(MultiIcon("/icon:svg/PointIcon"))`
+const StyledPointIcon = styled(MultiIcon(PointIcon))`
   cursor: pointer;
   color: ${GreyTextColor};
 

client/packages/lowcoder-design/src/components/popupCard.tsx

@@ -4,6 +4,7 @@ import { CopyTextButton } from "./copyTextButton";
 import { CSSProperties, ReactNode, useState } from "react";
 import styled from "styled-components";
 import {MultiIconDisplay} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {ErrorIcon, SuccessIcon} from "../icons";
 
 const StyledCard = styled(Card)<{ $backcolor: string }>`
   z-index: 3;
@@ -126,7 +127,7 @@ export function PopupCard(props: PopupCardProps) {
                 message={props.title}
                 type={props.hasError ? "error" : "success"}
                 showIcon
-                icon={props.hasError ? <MultiIconDisplay identifier="/icon:svg/ErrorIcon" /> : <MultiIconDisplay identifier="/icon:svg/SuccessIcon" />}
+                icon={props.hasError ? <MultiIconDisplay identifier={ErrorIcon} /> : <MultiIconDisplay identifier={SuccessIcon} />}
               />
             }
             extra={<CopyTextButton text={props.content ?? ""} />}

client/packages/lowcoder-design/src/components/shapeSelect/index.tsx

@@ -27,6 +27,7 @@ import styled from "styled-components";
 import { ANTDICON } from "icons/antIcon";
 import { JSX } from "react/jsx-runtime";
 import {MultiIcon} from "lowcoder/src/comps/comps/multiIconDisplay";
+import {CloseIcon, SearchIcon} from "../../icons";
 
 const PopupContainer = styled.div`
   width: 580px;
@@ -48,7 +49,7 @@ const TitleText = styled.span`
   color: #222222;
   line-height: 16px;
 `;
-const StyledCloseIcon = styled(MultiIcon("/icon:svg/CloseIcon"))`
+const StyledCloseIcon = styled(MultiIcon(CloseIcon))`
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -66,7 +67,7 @@ const SearchDiv = styled.div`
   display: flex;
   justify-content: space-between;
 `;
-const StyledSearchIcon = styled(MultiIcon("/icon:svg/SearchIcon"))`
+const StyledSearchIcon = styled(MultiIcon(SearchIcon))`
   position: absolute;
   top: 6px;
   left: 12px;