feat: new icons (#5412)

web/app/components/workflow/nodes/_base/components/add-button.tsx

@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 
 type Props = {
   className?: string
@@ -20,7 +22,7 @@ const AddButton: FC<Props> = ({
       className={cn(className, 'flex items-center h-7 justify-center bg-gray-100 hover:bg-gray-200 rounded-lg cursor-pointer text-xs font-medium text-gray-700 space-x-1')}
       onClick={onClick}
     >
-      <Plus className='w-3.5 h-3.5' />
+      <RiAddLine className='w-3.5 h-3.5' />
       <div>{text}</div>
     </div>
   )

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import type { InputVar } from '../../../../types'
 import { BlockEnum, InputVarType } from '../../../../types'
 import CodeEditor from '../editor/code-editor'
@@ -11,7 +14,6 @@ import TextEditor from '../editor/text-editor'
 import Select from '@/app/components/base/select'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import { Resolution } from '@/types/app'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { useFeatures } from '@/app/components/base/features/hooks'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
@@ -174,7 +176,7 @@ const FormItem: FC<Props> = ({
                   title={<span>JSON</span>}
                   headerRight={
                     (value as any).length > 1
-                      ? (<Trash03
+                      ? (<RiDeleteBinLine
                         onClick={handleArrayItemRemove(index)}
                         className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
                       />)
@@ -200,7 +202,7 @@ const FormItem: FC<Props> = ({
                   onChange={handleArrayItemChange(index)}
                   headerRight={
                     (value as any).length > 1
-                      ? (<Trash03
+                      ? (<RiDeleteBinLine
                         onClick={handleArrayItemRemove(index)}
                         className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
                       />)

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -3,11 +3,14 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiCloseLine,
+  RiLoader2Line,
+} from '@remixicon/react'
 import type { Props as FormProps } from './form'
 import Form from './form'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { Loading02, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { InputVarType, NodeRunningStatus } from '@/app/components/workflow/types'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
@@ -114,7 +117,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
             {t(`${i18nPrefix}.testRun`)} {nodeName}
           </div>
           <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <XClose className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
           </div>
         </div>
 
@@ -142,7 +145,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
               </div>
             )}
             <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow !h-8 flex items-center space-x-2 text-[13px]' onClick={handleRun}>
-              {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
+              {isRunning && <RiLoader2Line className='animate-spin w-4 h-4 text-white' />}
               <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
             </Button>
           </div>

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -5,7 +5,10 @@ import copy from 'copy-to-clipboard'
 import cn from 'classnames'
 import Wrap from './wrap'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
-import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -2,11 +2,13 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
+import {
+  RiArrowDownSLine,
+  RiQuestionLine,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { DefaultTFuncReturn } from 'i18next'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
   className?: string
@@ -42,7 +44,7 @@ const Filed: FC<Props> = ({
               <div className='w-[120px]'>
                 {tooltip}
               </div>}>
-              <HelpCircle className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
+              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
             </TooltipPlus>
           )}
 
@@ -50,7 +52,7 @@ const Filed: FC<Props> = ({
         <div className='flex'>
           {operations && <div>{operations}</div>}
           {supportFold && (
-            <ChevronRight className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
+            <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
           )}
         </div>
       </div>

web/app/components/workflow/nodes/_base/components/help-link.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiBookOpenLine } from '@remixicon/react'
 import { useNodeHelpLink } from '../hooks/use-node-help-link'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { BookOpen02 } from '@/app/components/base/icons/src/vender/line/education'
 import type { BlockEnum } from '@/app/components/workflow/types'
 
 type HelpLinkProps = {
@@ -21,7 +21,7 @@ const HelpLink = ({
         target='_blank'
         className='flex items-center justify-center mr-1 w-6 h-6'
       >
-        <BookOpen02 className='w-4 h-4 text-gray-500' />
+        <RiBookOpenLine className='w-4 h-4 text-gray-500' />
       </a>
     </TooltipPlus>
 

web/app/components/workflow/nodes/_base/components/next-step/add.tsx

@@ -3,13 +3,15 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import {
   useAvailableBlocks,
   useNodesInteractions,
   useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import type {
   CommonNodeType,
   OnSelectBlock,
@@ -66,7 +68,7 @@ const Add = ({
           )
         }
         <div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
-          <Plus className='w-3 h-3' />
+          <RiAddLine className='w-3 h-3' />
         </div>
         {t('workflow.panel.selectNextStep')}
       </div>

web/app/components/workflow/nodes/_base/components/node-control.tsx

@@ -5,6 +5,9 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiPlayLargeLine,
+} from '@remixicon/react'
 import {
   useNodeDataUpdate,
   useNodesInteractions,
@@ -14,7 +17,6 @@ import type { Node } from '../../../types'
 import { canRunBySingle } from '../../../utils'
 import PanelOperator from './panel-operator'
 import {
-  Play,
   Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
@@ -69,7 +71,7 @@ const NodeControl: FC<NodeControlProps> = ({
                     <TooltipPlus
                       popupContent={t('workflow.panel.runThisStep')}
                     >
-                      <Play className='w-3 h-3' />
+                      <RiPlayLargeLine className='w-3 h-3' />
                     </TooltipPlus>
                   )
               }

web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx

@@ -3,9 +3,9 @@ import {
   useCallback,
   useState,
 } from 'react'
+import { RiMoreFill } from '@remixicon/react'
 import type { OffsetOptions } from '@floating-ui/react'
 import PanelOperatorPopup from './panel-operator-popup'
-import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -59,7 +59,7 @@ const PanelOperator = ({
             ${triggerClassName}
           `}
         >
-          <DotsHorizontal className={`w-4 h-4 ${inNode ? 'text-gray-500' : 'text-gray-700'}`} />
+          <RiMoreFill className={`w-4 h-4 ${inNode ? 'text-gray-500' : 'text-gray-700'}`} />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -2,6 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback, useRef } from 'react'
 import cn from 'classnames'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
@@ -17,9 +20,11 @@ import { CodeLanguage } from '../../../code/types'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
 import s from '@/app/components/app/configuration/config-prompt/style.module.css'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
@@ -153,7 +158,7 @@ const Editor: FC<Props> = ({
                   </TooltipPlus>
                 )}
                 {showRemove && (
-                  <Trash03 className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={onRemove} />
+                  <RiDeleteBinLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={onRemove} />
                 )}
                 {!isCopied
                   ? (

web/app/components/workflow/nodes/_base/components/remove-button.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { RiDeleteBinLine } from '@remixicon/react'
 
 type Props = {
   className?: string
@@ -18,7 +18,7 @@ const Remove: FC<Props> = ({
       className={cn(className, 'p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800')}
       onClick={onClick}
     >
-      <Trash03 className='w-4 h-4' />
+      <RiDeleteBinLine className='w-4 h-4' />
     </div>
   )
 }

web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx

@@ -1,8 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
-import { Collapse04 } from '@/app/components/base/icons/src/vender/line/arrows'
+import {
+  RiCollapseDiagonalLine,
+  RiExpandDiagonalLine,
+} from '@remixicon/react'
 
 type Props = {
   isExpand: boolean
@@ -17,7 +19,7 @@ const ExpandBtn: FC<Props> = ({
     onExpandChange(!isExpand)
   }, [isExpand])
 
-  const Icon = isExpand ? Collapse04 : Expand04
+  const Icon = isExpand ? RiCollapseDiagonalLine : RiExpandDiagonalLine
   return (
     <Icon className='w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleToggle} />
   )

web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx

@@ -3,6 +3,10 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiArrowDownSLine,
+  RiCloseLine,
+} from '@remixicon/react'
 import produce from 'immer'
 import { useStoreApi } from 'reactflow'
 import VarReferencePopup from './var-reference-popup'
@@ -23,8 +27,6 @@ import {
 } from '@/app/components/workflow/hooks'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import AddButton from '@/app/components/base/button/add-button'
 const TRIGGER_DEFAULT_WIDTH = 227
 
@@ -244,7 +246,7 @@ const VarReferencePicker: FC<Props> = ({
                     noLeft
                     triggerClassName='!text-xs'
                     readonly={readonly}
-                    DropDownIcon={ChevronDown}
+                    DropDownIcon={RiArrowDownSLine}
                     value={varKindType}
                     options={varKindTypes}
                     onChange={handleVarKindTypeChange}
@@ -303,7 +305,7 @@ const VarReferencePicker: FC<Props> = ({
                 className='invisible group-hover/wrap:visible absolute h-5 right-1 top-[50%] translate-y-[-50%] group p-1 rounded-md hover:bg-black/5 cursor-pointer'
                 onClick={handleClearVar}
               >
-                <XClose className='w-3.5 h-3.5 text-gray-500 group-hover:text-gray-800' />
+                <RiCloseLine className='w-3.5 h-3.5 text-gray-500 group-hover:text-gray-800' />
               </div>)}
             </div>)}
         </PortalToFollowElemTrigger>

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean, useHover } from 'ahooks'
 import cn from 'classnames'
+import {
+  RiSearchLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
@@ -12,9 +15,6 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
-  SearchLg,
-} from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { checkKeys } from '@/utils/var'
 
@@ -243,7 +243,7 @@ const VarReferenceVars: FC<Props> = ({
               onClick={e => e.stopPropagation()}
             >
 
-              <SearchLg className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
+              <RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
               <input
                 value={searchText}
                 className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'

web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx

@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { VarType } from '@/app/components/workflow/types'
 
 type Props = {
@@ -45,7 +45,7 @@ const VarReferencePicker: FC<Props> = ({
         <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
           <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
             <div className='capitalize grow w-0 truncate' title={value}>{value}</div>
-            <ChevronDown className='shrink-0 w-3.5 h-3.5 text-gray-700' />
+            <RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{

web/app/components/workflow/nodes/_base/node.tsx

@@ -10,6 +10,11 @@ import {
   useRef,
 } from 'react'
 import cn from 'classnames'
+import {
+  RiCheckboxCircleLine,
+  RiErrorWarningLine,
+  RiLoader2Line,
+} from '@remixicon/react'
 import type { NodeProps } from '../../types'
 import {
   BlockEnum,
@@ -28,11 +33,6 @@ import NodeResizer from './components/node-resizer'
 import NodeControl from './components/node-control'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
 import BlockIcon from '@/app/components/workflow/block-icon'
-import {
-  CheckCircle,
-  Loading02,
-} from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 
 type BaseNodeProps = {
   children: ReactElement
@@ -169,17 +169,17 @@ const BaseNode: FC<BaseNodeProps> = ({
           }
           {
             (data._runningStatus === NodeRunningStatus.Running || data._singleRunningStatus === NodeRunningStatus.Running) && (
-              <Loading02 className='w-3.5 h-3.5 text-primary-600 animate-spin' />
+              <RiLoader2Line className='w-3.5 h-3.5 text-primary-600 animate-spin' />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Succeeded && (
-              <CheckCircle className='w-3.5 h-3.5 text-[#12B76A]' />
+              <RiCheckboxCircleLine className='w-3.5 h-3.5 text-[#12B76A]' />
             )
           }
           {
             data._runningStatus === NodeRunningStatus.Failed && (
-              <AlertCircle className='w-3.5 h-3.5 text-[#F04438]' />
+              <RiErrorWarningLine className='w-3.5 h-3.5 text-[#F04438]' />
             )
           }
         </div>

web/app/components/workflow/nodes/_base/panel.tsx

@@ -7,6 +7,10 @@ import {
   memo,
   useCallback,
 } from 'react'
+import {
+  RiCloseLine,
+  RiPlayLargeLine,
+} from '@remixicon/react'
 import cn from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
@@ -18,9 +22,6 @@ import {
   TitleInput,
 } from './components/title-description-input'
 import { useResizePanel } from './hooks/use-resize-panel'
-import {
-  XClose,
-} from '@/app/components/base/icons/src/vender/line/general'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   useAvailableBlocks,
@@ -32,7 +33,6 @@ import {
   useWorkflow,
 } from '@/app/components/workflow/hooks'
 import { canRunBySingle } from '@/app/components/workflow/utils'
-import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import type { Node } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -129,7 +129,7 @@ const BasePanel: FC<BasePanelProps> = ({
                         handleSyncWorkflowDraft(true)
                       }}
                     >
-                      <Play className='w-4 h-4 text-gray-500' />
+                      <RiPlayLargeLine className='w-4 h-4 text-gray-500' />
                     </div>
                   </TooltipPlus>
                 )
@@ -141,7 +141,7 @@ const BasePanel: FC<BasePanelProps> = ({
                 className='flex items-center justify-center w-6 h-6 cursor-pointer'
                 onClick={() => handleNodeSelect(id, true)}
               >
-                <XClose className='w-4 h-4' />
+                <RiCloseLine className='w-4 h-4' />
               </div>
             </div>
           </div>

web/app/components/workflow/nodes/code/dependency-picker.tsx

@@ -1,10 +1,13 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { t } from 'i18next'
+import {
+  RiArrowDownSLine,
+  RiSearchLine,
+} from '@remixicon/react'
 import type { CodeDependency } from './types'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import { Check, SearchLg } from '@/app/components/base/icons/src/vender/line/general'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 type Props = {
@@ -38,7 +41,7 @@ const DependencyPicker: FC<Props> = ({
       <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='flex-grow cursor-pointer'>
         <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
           <div className='grow w-0 truncate' title={value.name}>{value.name}</div>
-          <ChevronDown className='shrink-0 w-3.5 h-3.5 text-gray-700' />
+          <RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{
@@ -50,7 +53,7 @@ const DependencyPicker: FC<Props> = ({
           <div
             className='shadow-sm bg-white mb-2 mx-1 flex items-center px-2 rounded-lg bg-gray-100'
           >
-            <SearchLg className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
+            <RiSearchLine className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
             <input
               value={searchText}
               className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'

web/app/components/workflow/nodes/http/components/api-input.tsx

@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { Method } from '../types'
 import Selector from '../../_base/components/selector'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { VarType } from '../../../types'
 import type { Var } from '../../../types'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 
 const MethodOptions = [
   { label: 'GET', value: Method.get },
@@ -55,7 +55,7 @@ const ApiInput: FC<Props> = ({
         trigger={
           <div className={cn(readonly && 'cursor-pointer', 'h-8 shrink-0 flex items-center px-2.5 bg-gray-100 border-black/5 rounded-lg')} >
             <div className='w-12 pl-0.5 leading-[18px] text-xs font-medium text-gray-900 uppercase'>{method}</div>
-            {!readonly && <ChevronDown className='ml-1 w-3.5 h-3.5 text-gray-700' />}
+            {!readonly && <RiArrowDownSLine className='ml-1 w-3.5 h-3.5 text-gray-700' />}
           </div>
         }
         popupClassName='top-[34px] w-[108px]'

web/app/components/workflow/nodes/if-else/components/condition-item.tsx

@@ -3,13 +3,15 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
 import { isComparisonOperatorNeedTranslate } from '../utils'
 import { VarType } from '../../../types'
 import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
 import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
 import Selector from '@/app/components/workflow/nodes/_base/components/selector'
 import Toast from '@/app/components/base/toast'
@@ -237,7 +239,7 @@ const Item: FC<ItemProps> = ({
             className={cn(canRemove ? 'text-gray-500 bg-gray-100 hover:bg-gray-200  cursor-pointer' : 'bg-gray-25 text-gray-300', 'p-2 rounded-lg ')}
             onClick={canRemove ? onRemove : () => { }}
           >
-            <Trash03 className='w-4 h-4 ' />
+            <RiDeleteBinLine className='w-4 h-4 ' />
           </div>
         )}
       </div>

web/app/components/workflow/nodes/iteration/add-block.tsx

@@ -4,6 +4,9 @@ import {
 } from 'react'
 import produce from 'immer'
 import cn from 'classnames'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import { useStoreApi } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import {
@@ -17,7 +20,6 @@ import { NODES_INITIAL_DATA } from '../../constants'
 import InsertBlock from './insert-block'
 import type { IterationNodeType } from './types'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { IterationStart } from '@/app/components/base/icons/src/vender/workflow'
 import type {
   OnSelectBlock,
@@ -85,7 +87,7 @@ const AddBlock = ({
         `${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
         open && '!bg-gray-50',
       )}>
-        <Plus className='mr-1 w-4 h-4' />
+        <RiAddLine className='mr-1 w-4 h-4' />
         {t('workflow.common.addBlock')}
       </div>
     )

web/app/components/workflow/nodes/iteration/panel.tsx

@@ -1,7 +1,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-
+import {
+  RiArrowRightSLine,
+} from '@remixicon/react'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import Split from '../_base/components/split'
 import ResultPanel from '../../run/result-panel'
@@ -11,7 +13,6 @@ import useConfig from './use-config'
 import { InputVarType, type NodePanelProps } from '@/app/components/workflow/types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
-import { ArrowNarrowRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 const i18nPrefix = 'workflow.nodes.iteration'
 
@@ -116,7 +117,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
               <div className='px-4'>
                 <div className='flex items-center h-[34px] justify-between px-3 bg-gray-100 border-[0.5px] border-gray-200 rounded-lg cursor-pointer' onClick={showIterationDetail}>
                   <div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t(`${i18nPrefix}.iteration`, { count: iterationRunResult.length })}</div>
-                  <ArrowNarrowRight className='w-3.5 h-3.5 text-gray-500' />
+                  <RiArrowRightSLine className='w-3.5 h-3.5 text-gray-500' />
                 </div>
                 <Split className='mt-3' />
               </div>

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx

@@ -2,9 +2,12 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useBoolean } from 'ahooks'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import type { DataSet } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
-import { Settings01, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import FileIcon from '@/app/components/base/file-icon'
 import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
 import SettingsModal from '@/app/components/app/configuration/dataset-config/settings-modal'
@@ -65,7 +68,7 @@ const DatasetItem: FC<Props> = ({
             className='flex items-center justify-center w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
             onClick={onRemove}
           >
-            <Trash03 className='w-4 h-4 text-gray-500' />
+            <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
           </div>
         </div>
       )}

web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelConfig } from '../../../types'
 import {
@@ -19,7 +20,6 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
 import type {
   DatasetConfigs,
 } from '@/models/debug'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
   payload: {
@@ -94,7 +94,7 @@ const RetrievalConfig: FC<Props> = ({
       >
         <div className={cn(!readonly && 'cursor-pointer', open && 'bg-gray-100', 'flex items-center h-6  px-2 rounded-md hover:bg-gray-100 group  select-none')}>
           <div className={cn(open ? 'text-gray-700' : 'text-gray-500', 'leading-[18px] text-xs font-medium group-hover:bg-gray-100')}>{payload.retrieval_mode === RETRIEVE_TYPE.oneWay ? t('appDebug.datasetConfig.retrieveOneWay.title') : t('appDebug.datasetConfig.retrieveMultiWay.title')}</div>
-          {!readonly && <ChevronDown className='w-3 h-3 ml-1' />}
+          {!readonly && <RiArrowDownSLine className='w-3 h-3 ml-1' />}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>

web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx

@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { uniqueId } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
+import { RiQuestionLine } from '@remixicon/react'
 import type { PromptItem, Variable } from '../../../types'
 import { EditionType } from '../../../types'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { PromptRole } from '@/models/debug'
 
 const i18nPrefix = 'workflow.nodes.llm'
@@ -111,7 +111,7 @@ const ConfigPromptItem: FC<Props> = ({
               <div className='max-w-[180px]'>{t(`${i18nPrefix}.roleDescription.${payload.role}`)}</div>
             }
           >
-            <HelpCircle className='w-3.5 h-3.5 text-gray-400' />
+            <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
           </TooltipPlus>
         </div>
       }

web/app/components/workflow/nodes/llm/panel.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiQuestionLine } from '@remixicon/react'
 import MemoryConfig from '../_base/components/memory-config'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
@@ -19,7 +20,6 @@ import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/befo
 import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import Switch from '@/app/components/base/switch'
 const i18nPrefix = 'workflow.nodes.llm'
@@ -208,7 +208,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
                 <TooltipPlus
                   popupContent={t('workflow.nodes.common.memories.tip')}
                 >
-                  <HelpCircle className='w-3.5 h-3.5 text-gray-400' />
+                  <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
                 </TooltipPlus>
               </div>
               <div className='flex items-center h-[18px] px-1 rounded-[5px] border border-black/8 text-xs font-semibold text-gray-500 uppercase'>{t('workflow.nodes.common.memories.builtIn')}</div>
@@ -223,7 +223,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
                       <div className='max-w-[180px]'>{t('workflow.nodes.llm.roleDescription.user')}</div>
                     }
                   >
-                    <HelpCircle className='w-3.5 h-3.5 text-gray-400' />
+                    <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
                   </TooltipPlus>
                 </div>}
                 value={inputs.memory.query_prompt_template || '{{#sys.query#}}'}

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/item.tsx

@@ -2,9 +2,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+} from '@remixicon/react'
 import type { Param } from '../../types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { Edit03, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 
 type Props = {
@@ -43,14 +46,14 @@ const Item: FC<Props> = ({
           className='p-1 cursor-pointer rounded-md hover:bg-black/5'
           onClick={onEdit}
         >
-          <Edit03 className='w-4 h-4 text-gray-500' />
+          <RiEditLine className='w-4 h-4 text-gray-500' />
         </div>
 
         <div
           className='p-1 cursor-pointer rounded-md hover:bg-black/5'
           onClick={onDelete}
         >
-          <Trash03 className='w-4 h-4 text-gray-500' />
+          <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
         </div>
       </div>
     </div>

web/app/components/workflow/nodes/parameter-extractor/panel.tsx

@@ -1,6 +1,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import MemoryConfig from '../_base/components/memory-config'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import Editor from '../_base/components/prompt/editor'
@@ -17,7 +20,6 @@ import ModelParameterModal from '@/app/components/header/account-setting/model-p
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { InputVarType, type NodePanelProps } from '@/app/components/workflow/types'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import { VarType } from '@/app/components/workflow/types'
 
@@ -128,7 +130,7 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
                 <div className='w-[120px]'>
                   {t(`${i18nPrefix}.instructionTip`)}
                 </div>}>
-                <HelpCircle className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
+                <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
               </TooltipPlus>
             </div>
           }

web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx

@@ -2,11 +2,13 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import MemoryConfig from '../../_base/components/memory-config'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { Memory, Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
 type Props = {
@@ -52,7 +54,7 @@ const AdvancedSetting: FC<Props> = ({
               <div className='w-[120px]'>
                 {t(`${i18nPrefix}.instructionTip`)}
               </div>}>
-              <HelpCircle className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
+              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
             </TooltipPlus>
           </div>
         }

web/app/components/workflow/nodes/question-classifier/components/class-item.tsx

@@ -2,9 +2,11 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import type { Topic } from '../types'
 import TextEditor from '../../_base/components/editor/text-editor'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
@@ -49,7 +51,7 @@ const ClassItem: FC<Props> = ({
           <div className='text-xs font-medium text-gray-500'>{payload.name.length}</div>
           <div className='mx-3 h-3 w-px bg-gray-200'></div>
           {!readonly && (
-            <Trash03
+            <RiDeleteBinLine
               className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
               onClick={onRemove}
             />

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -3,11 +3,13 @@ import type { FC } from 'react'
 import React, { useCallback, useRef } from 'react'
 import { useBoolean, useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 
 type Props = {
@@ -66,7 +68,7 @@ const VarItem: FC<Props> = ({
                   <Edit03 className='w-4 h-4 text-gray-500' />
                 </div>
                 <div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
-                  <Trash03 className='w-4 h-4 text-gray-500' />
+                  <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
                 </div>
               </>
             ))}

web/app/components/workflow/nodes/template-transform/panel.tsx

@@ -1,6 +1,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import { CodeLanguage } from '../code/types'
 import useConfig from './use-config'
 import type { TemplateTransformNodeType } from './types'
@@ -10,7 +13,6 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
@@ -82,7 +84,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
                 href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
                 target='_blank'>
                 <span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
-                <HelpCircle className='w-3 h-3' />
+                <RiQuestionLine className='w-3 h-3' />
               </a>
               <div className='mx-1.5 w-px h-3 bg-gray-200'></div>
             </div>

web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx

@@ -4,6 +4,9 @@ import type { ChangeEvent, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import type { VarGroupItem as VarGroupItemType } from '../types'
 import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
 import VarList from '../components/var-list'
@@ -11,7 +14,6 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { VarType } from '@/app/components/workflow/types'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { Folder } from '@/app/components/base/icons/src/vender/line/files'
 import { checkKeys } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
@@ -133,7 +135,7 @@ const VarGroupItem: FC<Props> = ({
               className='group-hover:block hidden ml-0.5 p-1 rounded-md text-gray-500 cursor-pointer hover:bg-[#FEE4E2] hover:text-[#D92D20]'
               onClick={onRemove}
             >
-              <Trash03
+              <RiDeleteBinLine
                 className='w-4 h-4'
               />
             </div>