From 9e10b73b5469e5f492c53c7acb4ec41397c84ade Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Mon, 9 Feb 2026 19:51:05 +0800
Subject: [PATCH] refactor(skill): replace @remixicon/react imports with CSS
 icon classes

Migrate all Remixicon component imports in workflow/skill to Tailwind CSS
icon utility classes (i-ri-*), reducing JS bundle size. Update MenuItem
to accept string icon classes alongside React components. Adjust test
selectors that relied on SVG element queries.
---
 .../plugins/file-picker-panel.tsx             |  9 ++++-----
 .../file-reference-block/component.tsx        |  5 ++---
 .../file-preview-panel.tsx                    |  7 +++----
 .../plugins/tool-block/component.tsx          |  7 +++----
 .../tool-block/tool-group-block-component.tsx | 11 +++++-----
 .../plugins/tool-block/tool-header.tsx        |  5 ++---
 .../file-tree/artifacts/artifacts-section.tsx |  7 +++----
 .../file-tree/artifacts/artifacts-tree.tsx    |  7 +++----
 .../skill/file-tree/tree/file-tree.tsx        |  3 +--
 .../skill/file-tree/tree/menu-item.spec.tsx   |  4 ++--
 .../skill/file-tree/tree/menu-item.tsx        |  9 +++++----
 .../skill/file-tree/tree/node-menu.tsx        | 20 ++++++-------------
 .../file-tree/tree/tree-node-icon.spec.tsx    |  4 ++--
 .../skill/file-tree/tree/tree-node-icon.tsx   |  5 ++---
 .../skill/file-tree/tree/tree-node.tsx        |  3 +--
 .../file-tree/tree/upload-status-tooltip.tsx  | 14 ++++---------
 .../skill/skill-body/sidebar-search-add.tsx   | 11 +++-------
 .../skill/skill-body/tabs/file-tab-item.tsx   |  3 +--
 .../skill/start-tab/create-import-section.tsx |  5 ++---
 .../skill/start-tab/import-skill-modal.tsx    |  3 +--
 .../skill/start-tab/template-card.tsx         |  5 ++---
 .../skill/viewer/pdf-file-preview.tsx         |  5 ++---
 .../sqlite-file-preview/table-selector.tsx    |  3 +--
 23 files changed, 60 insertions(+), 95 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
index c57dbb02bf..a6423d50c3 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
@@ -1,7 +1,6 @@
 import type { NodeRendererProps } from 'react-arborist'
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { TreeNodeData } from '@/app/components/workflow/skill/type'
-import { RiArrowDownSLine, RiArrowRightSLine, RiFolderLine, RiFolderOpenLine } from '@remixicon/react'
 import { useSize } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useMemo, useRef } from 'react'
@@ -66,8 +65,8 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
           {isFolder
             ? (
                 node.isOpen
-                  ? <RiFolderOpenLine className="size-4 text-text-accent" aria-hidden="true" />
-                  : <RiFolderLine className="size-4 text-text-secondary" aria-hidden="true" />
+                  ? <span className="i-ri-folder-open-line size-4 text-text-accent" aria-hidden="true" />
+                  : <span className="i-ri-folder-line size-4 text-text-secondary" aria-hidden="true" />
               )
             : (
                 <FileTypeIcon type={fileIconType as FileAppearanceType} size="sm" />
@@ -103,8 +102,8 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
           )}
         >
           {node.isOpen
-            ? <RiArrowDownSLine className="size-4" aria-hidden="true" />
-            : <RiArrowRightSLine className="size-4" aria-hidden="true" />}
+            ? <span className="i-ri-arrow-down-s-line size-4" aria-hidden="true" />
+            : <span className="i-ri-arrow-right-s-line size-4" aria-hidden="true" />}
         </button>
       )}
     </div>
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
index 577177a77c..cadaaacd50 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
@@ -3,7 +3,6 @@ import type { FileAppearanceType } from '@/app/components/base/file-uploader/typ
 import type { TreeNodeData } from '@/app/components/workflow/skill/type'
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { RiAlertFill, RiFolderLine } from '@remixicon/react'
 import { $getNodeByKey } from 'lexical'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -186,7 +185,7 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
           >
             <span className="flex items-center justify-center p-px">
               {isFolder
-                ? <RiFolderLine className={cn('size-[14px]', isMissing ? 'text-text-warning' : 'text-text-accent')} aria-hidden="true" />
+                ? <span className={cn('i-ri-folder-line size-[14px]', isMissing ? 'text-text-warning' : 'text-text-accent')} aria-hidden="true" />
                 : (
                     <FileTypeIcon
                       type={(iconType || 'document') as FileAppearanceType}
@@ -200,7 +199,7 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
             </span>
             {
               isMissing && (
-                <RiAlertFill className="size-3 text-text-warning" />
+                <span className="i-ri-alert-fill size-3 text-text-warning" />
               )
             }
           </span>
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
index 7dbae49dd2..4358582ed9 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
@@ -1,6 +1,5 @@
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { AppAssetTreeView } from '@/types/app-asset'
-import { RiCloseLine, RiExternalLinkLine, RiFolderLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -97,7 +96,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
         <div className="flex min-w-0 flex-1 items-center gap-2">
           {folderName && (
             <div className="flex items-center gap-1.5">
-              <RiFolderLine className="size-5 text-text-secondary" aria-hidden="true" />
+              <span className="i-ri-folder-line size-5 text-text-secondary" aria-hidden="true" />
               <span className="text-[13px] font-medium leading-4 text-text-primary">
                 {folderName}
               </span>
@@ -133,7 +132,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
             )}
             aria-label={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
           >
-            <RiExternalLinkLine className="size-4" />
+            <span className="i-ri-external-link-line size-4" />
           </button>
         </Tooltip>
         <button
@@ -142,7 +141,7 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
           className="inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover"
           aria-label={t('operation.close', { ns: 'common' })}
         >
-          <RiCloseLine className="size-4" />
+          <span className="i-ri-close-line size-4" />
         </button>
       </div>
       <div className="flex min-h-0 w-full flex-1 gap-2 overflow-auto pb-4 pl-4 pr-3 pt-1">
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
index 3c613d7e41..588cbebde8 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
@@ -4,7 +4,6 @@ import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { RiAlertFill, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -381,9 +380,9 @@ const ToolBlockComponent = ({
       )
     })()
     const hoverIcon = (
-      <RiEqualizer2Line
+      <span
         className={cn(
-          'hidden size-[14px]',
+          'i-ri-equalizer-2-line hidden size-[14px]',
           needAuthorization ? 'text-text-warning' : 'text-text-accent',
           isInteractive && 'group-hover/tool:block',
         )}
@@ -590,7 +589,7 @@ const ToolBlockComponent = ({
         {needAuthorization && (
           <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
             {authBadgeLabel}
-            <RiAlertFill className="h-3 w-3" />
+            <span className="i-ri-alert-fill h-3 w-3" />
           </span>
         )}
       </span>
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
index 951638869a..9a0ee06cdd 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
@@ -4,7 +4,6 @@ import type { ToolParameter } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { RiAlertFill, RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -561,9 +560,9 @@ const ToolGroupBlockComponent = ({
       )
     })()
     const hoverIcon = (
-      <RiEqualizer2Line
+      <span
         className={cn(
-          'hidden size-[14px]',
+          'i-ri-equalizer-2-line hidden size-[14px]',
           needAuthorization ? 'text-text-warning' : 'text-text-accent',
           isInteractive && 'group-hover:block',
         )}
@@ -698,7 +697,7 @@ const ToolGroupBlockComponent = ({
             }}
           >
             <span className="sr-only">{t('operation.close', { ns: 'common' })}</span>
-            <RiCloseLine className="h-4 w-4" />
+            <span className="i-ri-close-line h-4 w-4" />
           </button>
         </div>
         {providerDescription && (
@@ -789,7 +788,7 @@ const ToolGroupBlockComponent = ({
                               setExpandedToolId(item.configId)
                             }}
                           >
-                            <RiEqualizer2Line className="size-3.5" />
+                            <span className="i-ri-equalizer-2-line size-3.5" />
                             <span className="system-xs-medium">{t('operation.settings', { ns: 'common' })}</span>
                           </button>
                           <div className="mx-1 h-3 w-px bg-divider-regular"></div>
@@ -849,7 +848,7 @@ const ToolGroupBlockComponent = ({
           ? (
               <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
                 {authBadgeLabel}
-                <RiAlertFill className="h-3 w-3" />
+                <span className="i-ri-alert-fill h-3 w-3" />
               </span>
             )
           : (
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx
index 59b6a75396..141461bcf3 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { Emoji } from '@/app/components/tools/types'
-import { RiArrowLeftSLine, RiCloseLine } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 
 type ToolHeaderProps = {
@@ -71,7 +70,7 @@ const ToolHeader = ({
                   onBack()
                 }}
               >
-                <RiArrowLeftSLine className="h-4 w-4" />
+                <span className="i-ri-arrow-left-s-line h-4 w-4" />
               </button>
             )}
             {renderHeaderIcon()}
@@ -89,7 +88,7 @@ const ToolHeader = ({
               onClose()
             }}
           >
-            <RiCloseLine className="h-4 w-4" />
+            <span className="i-ri-close-line h-4 w-4" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/workflow/skill/file-tree/artifacts/artifacts-section.tsx b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-section.tsx
index 1d61e355ca..31671e20e2 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts/artifacts-section.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-section.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { SandboxFileTreeNode } from '@/types/sandbox-file'
-import { RiArrowDownSLine, RiArrowRightSLine, RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -74,15 +73,15 @@ const ArtifactsSection = ({ className }: ArtifactsSectionProps) => {
 
           <div className="relative flex items-center">
             {showSpinner
-              ? <RiLoader2Line className="size-3.5 animate-spin text-text-tertiary" aria-hidden="true" />
+              ? <span className="i-ri-loader-2-line size-3.5 animate-spin text-text-tertiary" aria-hidden="true" />
               : (
                   <>
                     {showBlueDot && (
                       <div className="absolute -left-2 size-[7px] rounded-full border border-white bg-state-accent-solid" />
                     )}
                     {isExpanded
-                      ? <RiArrowDownSLine className="size-4 text-text-tertiary" aria-hidden="true" />
-                      : <RiArrowRightSLine className="size-4 text-text-tertiary" aria-hidden="true" />}
+                      ? <span className="i-ri-arrow-down-s-line size-4 text-text-tertiary" aria-hidden="true" />
+                      : <span className="i-ri-arrow-right-s-line size-4 text-text-tertiary" aria-hidden="true" />}
                   </>
                 )}
           </div>
diff --git a/web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx
index b8e006c1cc..7a11cfaef0 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts/artifacts-tree.tsx
@@ -2,7 +2,6 @@
 
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { SandboxFileTreeNode } from '@/types/sandbox-file'
-import { RiDownloadLine, RiFolderLine, RiFolderOpenLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
@@ -84,8 +83,8 @@ const ArtifactsTreeNode = ({
           {isFolder
             ? (
                 isExpanded
-                  ? <RiFolderOpenLine className="size-4 text-text-accent" aria-hidden="true" />
-                  : <RiFolderLine className="size-4 text-text-secondary" aria-hidden="true" />
+                  ? <span className="i-ri-folder-open-line size-4 text-text-accent" aria-hidden="true" />
+                  : <span className="i-ri-folder-line size-4 text-text-secondary" aria-hidden="true" />
               )
             : <FileTypeIcon type={fileIconType as FileAppearanceType} size="sm" />}
         </div>
@@ -107,7 +106,7 @@ const ArtifactsTreeNode = ({
             )}
             aria-label={`Download ${node.name}`}
           >
-            <RiDownloadLine className="size-3.5 text-text-tertiary" />
+            <span className="i-ri-download-line size-3.5 text-text-tertiary" />
           </button>
         )}
       </div>
diff --git a/web/app/components/workflow/skill/file-tree/tree/file-tree.tsx b/web/app/components/workflow/skill/file-tree/tree/file-tree.tsx
index f30b68856f..5a6729adfb 100644
--- a/web/app/components/workflow/skill/file-tree/tree/file-tree.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/file-tree.tsx
@@ -4,7 +4,6 @@ import type { MoveHandler, NodeApi, NodeRendererProps, TreeApi } from 'react-arb
 import type { TreeNodeData } from '../../type'
 import type { OpensObject } from '@/app/components/workflow/store/workflow/skill-editor/file-tree-slice'
 import type { AppAssetTreeView } from '@/types/app-asset'
-import { RiDragDropLine } from '@remixicon/react'
 import { useIsMutating } from '@tanstack/react-query'
 import { useSize } from 'ahooks'
 import * as React from 'react'
@@ -82,7 +81,7 @@ const DropTip = () => {
   const { t } = useTranslation('workflow')
   return (
     <div className="flex shrink-0 items-center justify-center gap-2 py-4 text-text-quaternary">
-      <RiDragDropLine className="size-4" aria-hidden="true" />
+      <span className="i-ri-drag-drop-line size-4" aria-hidden="true" />
       <span className="system-xs-regular">
         {t('skillSidebar.dropTip')}
       </span>
diff --git a/web/app/components/workflow/skill/file-tree/tree/menu-item.spec.tsx b/web/app/components/workflow/skill/file-tree/tree/menu-item.spec.tsx
index 037e728fd2..1eb3aa3b0c 100644
--- a/web/app/components/workflow/skill/file-tree/tree/menu-item.spec.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/menu-item.spec.tsx
@@ -68,7 +68,7 @@ describe('MenuItem', () => {
       // Arrange
       const tooltipText = 'Show help'
       const { container } = renderMenuItem({ tooltip: tooltipText })
-      const tooltipIcon = container.querySelector('svg.text-text-quaternary')
+      const tooltipIcon = container.querySelector('.i-ri-question-line')
 
       // Act
       expect(tooltipIcon).toBeTruthy()
@@ -103,7 +103,7 @@ describe('MenuItem', () => {
       // Arrange
       const onClick = vi.fn()
       const { container } = renderMenuItem({ onClick, tooltip: 'Help' })
-      const tooltipIcon = container.querySelector('svg.text-text-quaternary')
+      const tooltipIcon = container.querySelector('.i-ri-question-line')
 
       // Act
       expect(tooltipIcon).toBeTruthy()
diff --git a/web/app/components/workflow/skill/file-tree/tree/menu-item.tsx b/web/app/components/workflow/skill/file-tree/tree/menu-item.tsx
index dcc33f5f1d..10ddc625f9 100644
--- a/web/app/components/workflow/skill/file-tree/tree/menu-item.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/menu-item.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { VariantProps } from 'class-variance-authority'
-import { RiQuestionLine } from '@remixicon/react'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import Tooltip from '@/app/components/base/tooltip'
@@ -52,7 +51,7 @@ const labelVariants = cva('text-text-secondary system-sm-regular', {
 })
 
 export type MenuItemProps = {
-  icon: React.ElementType
+  icon: React.ElementType | string
   label: string
   kbd?: readonly string[]
   onClick: React.MouseEventHandler<HTMLButtonElement>
@@ -73,7 +72,9 @@ const MenuItem = ({ icon: Icon, label, kbd, onClick, disabled, variant, tooltip
       disabled={disabled}
       className={cn(menuItemVariants({ variant }))}
     >
-      <Icon className={cn(iconVariants({ variant }))} aria-hidden="true" />
+      {typeof Icon === 'string'
+        ? <span className={cn(Icon, iconVariants({ variant }))} aria-hidden="true" />
+        : <Icon className={cn(iconVariants({ variant }))} aria-hidden="true" />}
       <span className={cn(labelVariants({ variant }), 'flex-1 text-left')}>{label}</span>
       {kbd && kbd.length > 0 && <ShortcutsName keys={kbd} textColor="secondary" />}
       {tooltip && (
@@ -88,7 +89,7 @@ const MenuItem = ({ icon: Icon, label, kbd, onClick, disabled, variant, tooltip
               event.stopPropagation()
             }}
           >
-            <RiQuestionLine className="size-4 text-text-quaternary hover:text-text-tertiary" />
+            <span className="i-ri-question-line size-4 text-text-quaternary hover:text-text-tertiary" />
           </span>
         </Tooltip>
       )}
diff --git a/web/app/components/workflow/skill/file-tree/tree/node-menu.tsx b/web/app/components/workflow/skill/file-tree/tree/node-menu.tsx
index 0363545c9f..651dc9e2ed 100644
--- a/web/app/components/workflow/skill/file-tree/tree/node-menu.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/node-menu.tsx
@@ -3,14 +3,6 @@
 import type { NodeApi, TreeApi } from 'react-arborist'
 import type { NodeMenuType } from '../../constants'
 import type { TreeNodeData } from '../../type'
-import {
-  RiClipboardLine,
-  RiDeleteBinLine,
-  RiEdit2Line,
-  RiFolderUploadLine,
-  RiScissorsLine,
-  RiUploadLine,
-} from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -146,7 +138,7 @@ const NodeMenu = ({
             disabled={isLoading}
           />
           <MenuItem
-            icon={RiFolderUploadLine}
+            icon="i-ri-folder-upload-line"
             label={t('skillSidebar.menu.uploadFolder')}
             onClick={() => folderInputRef.current?.click()}
             disabled={isLoading}
@@ -156,7 +148,7 @@ const NodeMenu = ({
             <>
               <div className="my-1 h-px bg-divider-subtle" />
               <MenuItem
-                icon={RiUploadLine}
+                icon="i-ri-upload-line"
                 label={t('skillSidebar.menu.importSkills')}
                 onClick={() => setIsImportModalOpen(true)}
                 disabled={isLoading}
@@ -184,7 +176,7 @@ const NodeMenu = ({
       {!isRoot && (
         <>
           <MenuItem
-            icon={RiScissorsLine}
+            icon="i-ri-scissors-line"
             label={t('skillSidebar.menu.cut')}
             kbd={KBD_CUT}
             onClick={handleCut}
@@ -195,7 +187,7 @@ const NodeMenu = ({
 
       {isFolder && hasClipboard && (
         <MenuItem
-          icon={RiClipboardLine}
+          icon="i-ri-clipboard-line"
           label={t('skillSidebar.menu.paste')}
           kbd={KBD_PASTE}
           onClick={handlePaste}
@@ -207,13 +199,13 @@ const NodeMenu = ({
         <>
           <div className="my-1 h-px bg-divider-subtle" />
           <MenuItem
-            icon={RiEdit2Line}
+            icon="i-ri-edit-2-line"
             label={t('skillSidebar.menu.rename')}
             onClick={handleRename}
             disabled={isLoading}
           />
           <MenuItem
-            icon={RiDeleteBinLine}
+            icon="i-ri-delete-bin-line"
             label={t('skillSidebar.menu.delete')}
             onClick={handleDeleteClick}
             disabled={isLoading}
diff --git a/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.spec.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.spec.tsx
index b6c664e7a4..cb2296ca86 100644
--- a/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.spec.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.spec.tsx
@@ -29,7 +29,7 @@ describe('TreeNodeIcon', () => {
 
       // Act
       const toggleButton = screen.getByRole('button', { name: /workflow\.skillSidebar\.toggleFolder/i })
-      const icon = toggleButton.querySelector('svg')
+      const icon = toggleButton.querySelector('[aria-hidden="true"]')
 
       // Assert
       expect(toggleButton).toBeInTheDocument()
@@ -50,7 +50,7 @@ describe('TreeNodeIcon', () => {
 
       // Act
       const toggleButton = screen.getByRole('button', { name: /workflow\.skillSidebar\.toggleFolder/i })
-      const icon = toggleButton.querySelector('svg')
+      const icon = toggleButton.querySelector('[aria-hidden="true"]')
 
       // Assert
       expect(icon).toHaveClass('text-text-secondary')
diff --git a/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx
index a06421c204..d0997fa645 100644
--- a/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-node-icon.tsx
@@ -3,7 +3,6 @@
 // Icon rendering for tree nodes (folder/file icons with dirty indicator)
 
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
-import { RiFolderLine, RiFolderOpenLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { cn } from '@/utils/classnames'
@@ -41,8 +40,8 @@ export const TreeNodeIcon = ({
         )}
       >
         {isOpen
-          ? <RiFolderOpenLine className="size-4 text-text-accent" aria-hidden="true" />
-          : <RiFolderLine className="size-4 text-text-secondary" aria-hidden="true" />}
+          ? <span className="i-ri-folder-open-line size-4 text-text-accent" aria-hidden="true" />
+          : <span className="i-ri-folder-line size-4 text-text-secondary" aria-hidden="true" />}
       </button>
     )
   }
diff --git a/web/app/components/workflow/skill/file-tree/tree/tree-node.tsx b/web/app/components/workflow/skill/file-tree/tree/tree-node.tsx
index ebccd59477..3ccc155d4b 100644
--- a/web/app/components/workflow/skill/file-tree/tree/tree-node.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/tree-node.tsx
@@ -2,7 +2,6 @@
 
 import type { NodeRendererProps } from 'react-arborist'
 import type { TreeNodeData } from '../../type'
-import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -171,7 +170,7 @@ const TreeNode = ({ node, style, dragHandle, treeChildren }: TreeNodeProps) => {
             )}
             aria-label={t('skillSidebar.menu.moreActions')}
           >
-            <RiMoreFill className="size-4 text-text-tertiary" aria-hidden="true" />
+            <span className="i-ri-more-fill size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[100]">
diff --git a/web/app/components/workflow/skill/file-tree/tree/upload-status-tooltip.tsx b/web/app/components/workflow/skill/file-tree/tree/upload-status-tooltip.tsx
index 1dfc206328..f6ef6faab1 100644
--- a/web/app/components/workflow/skill/file-tree/tree/upload-status-tooltip.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree/upload-status-tooltip.tsx
@@ -1,12 +1,6 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import {
-  RiAlertFill,
-  RiCheckboxCircleFill,
-  RiCloseLine,
-  RiUploadCloud2Line,
-} from '@remixicon/react'
 import { memo, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
@@ -74,13 +68,13 @@ const UploadStatusTooltip = ({ fallback }: UploadStatusTooltipProps) => {
 
         <div className="relative z-10 shrink-0">
           {uploadStatus === 'uploading' && (
-            <RiUploadCloud2Line className="size-6 text-text-accent" />
+            <span className="i-ri-upload-cloud-2-line size-6 text-text-accent" />
           )}
           {uploadStatus === 'success' && (
-            <RiCheckboxCircleFill className="size-5 text-text-success" />
+            <span className="i-ri-checkbox-circle-fill size-5 text-text-success" />
           )}
           {uploadStatus === 'partial_error' && (
-            <RiAlertFill className="size-5 text-text-warning" />
+            <span className="i-ri-alert-fill size-5 text-text-warning" />
           )}
         </div>
 
@@ -118,7 +112,7 @@ const UploadStatusTooltip = ({ fallback }: UploadStatusTooltipProps) => {
           className="relative z-10 shrink-0 rounded p-0.5 text-text-tertiary hover:text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-state-accent-solid"
           onClick={handleClose}
         >
-          <RiCloseLine className="size-4" />
+          <span className="i-ri-close-line size-4" />
         </button>
       </div>
     </div>
diff --git a/web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx b/web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx
index a6da6b241d..fc4bbb79c2 100644
--- a/web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx
+++ b/web/app/components/workflow/skill/skill-body/sidebar-search-add.tsx
@@ -1,10 +1,5 @@
 'use client'
 
-import {
-  RiAddLine,
-  RiFolderUploadLine,
-  RiUploadLine,
-} from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
@@ -81,7 +76,7 @@ const SidebarSearchAdd = () => {
             className="!size-6 shrink-0 !p-1"
             aria-label={t('operation.add', { ns: 'common' })}
           >
-            <RiAddLine className="size-4" aria-hidden="true" />
+            <span className="i-ri-add-line size-4" aria-hidden="true" />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[30]">
@@ -124,7 +119,7 @@ const SidebarSearchAdd = () => {
               disabled={isLoading}
             />
             <MenuItem
-              icon={RiFolderUploadLine}
+              icon="i-ri-folder-upload-line"
               label={t('skillSidebar.menu.uploadFolder')}
               onClick={() => folderInputRef.current?.click()}
               disabled={isLoading}
@@ -133,7 +128,7 @@ const SidebarSearchAdd = () => {
             <div className="my-1 h-px bg-divider-subtle" />
 
             <MenuItem
-              icon={RiUploadLine}
+              icon="i-ri-upload-line"
               label={t('skillSidebar.menu.importSkills')}
               onClick={() => setIsImportModalOpen(true)}
               disabled={isLoading}
diff --git a/web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx b/web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx
index 33ffdfb066..4d61747f0e 100644
--- a/web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx
+++ b/web/app/components/workflow/skill/skill-body/tabs/file-tab-item.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
-import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -95,7 +94,7 @@ const FileTabItem = ({
         aria-label={t('operation.close', { ns: 'common' })}
         onClick={handleClose}
       >
-        <RiCloseLine className="size-4" aria-hidden="true" />
+        <span className="i-ri-close-line size-4" aria-hidden="true" />
       </button>
     </div>
   )
diff --git a/web/app/components/workflow/skill/start-tab/create-import-section.tsx b/web/app/components/workflow/skill/start-tab/create-import-section.tsx
index 274786b69d..0dbb03d23f 100644
--- a/web/app/components/workflow/skill/start-tab/create-import-section.tsx
+++ b/web/app/components/workflow/skill/start-tab/create-import-section.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { RiAddCircleFill, RiUploadLine } from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,13 +19,13 @@ const CreateImportSection = () => {
     <>
       <div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-6">
         <ActionCard
-          icon={<RiAddCircleFill className="size-5 text-text-accent" />}
+          icon={<span className="i-ri-add-circle-fill size-5 text-text-accent" />}
           title={t('skill.startTab.createBlankSkill')}
           description={t('skill.startTab.createBlankSkillDesc')}
           onClick={() => setIsCreateModalOpen(true)}
         />
         <ActionCard
-          icon={<RiUploadLine className="size-5 text-text-accent" />}
+          icon={<span className="i-ri-upload-line size-5 text-text-accent" />}
           title={t('skill.startTab.importSkill')}
           description={t('skill.startTab.importSkillDesc')}
           onClick={() => setIsImportModalOpen(true)}
diff --git a/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx b/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx
index 8499fc0410..380a2a04c5 100644
--- a/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx
+++ b/web/app/components/workflow/skill/start-tab/import-skill-modal.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { ChangeEvent, DragEvent } from 'react'
-import { RiUploadCloud2Line } from '@remixicon/react'
 import { memo, useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -181,7 +180,7 @@ const ImportSkillModal = ({ isOpen, onClose }: ImportSkillModalProps) => {
                 onDrop={handleDrop}
                 onClick={() => fileInputRef.current?.click()}
               >
-                <RiUploadCloud2Line className="mb-2 size-8 text-text-tertiary" />
+                <span className="i-ri-upload-cloud-2-line mb-2 size-8 text-text-tertiary" />
                 <p className="text-text-tertiary system-sm-regular">
                   {t(`${PREFIX}.dropHint`, { ns: NS })}
                   {' '}
diff --git a/web/app/components/workflow/skill/start-tab/template-card.tsx b/web/app/components/workflow/skill/start-tab/template-card.tsx
index abfab60f2e..369bef37a9 100644
--- a/web/app/components/workflow/skill/start-tab/template-card.tsx
+++ b/web/app/components/workflow/skill/start-tab/template-card.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { SkillTemplateSummary } from './templates/types'
-import { RiAddLine, RiCheckLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
@@ -51,7 +50,7 @@ const TemplateCard = ({ template, added, disabled, loading, onUse }: TemplateCar
                   className="w-full"
                   disabled
                 >
-                  <RiCheckLine className="mr-0.5 h-4 w-4" />
+                  <span className="i-ri-check-line mr-0.5 h-4 w-4" />
                   {t('skill.startTab.skillAdded')}
                 </Button>
               )
@@ -64,7 +63,7 @@ const TemplateCard = ({ template, added, disabled, loading, onUse }: TemplateCar
                   loading={loading}
                   onClick={() => onUse(template)}
                 >
-                  <RiAddLine className="mr-0.5 h-4 w-4" />
+                  <span className="i-ri-add-line mr-0.5 h-4 w-4" />
                   {t('skill.startTab.useThisSkill')}
                 </Button>
               )}
diff --git a/web/app/components/workflow/skill/viewer/pdf-file-preview.tsx b/web/app/components/workflow/skill/viewer/pdf-file-preview.tsx
index 161937858a..c435a58cfb 100644
--- a/web/app/components/workflow/skill/viewer/pdf-file-preview.tsx
+++ b/web/app/components/workflow/skill/viewer/pdf-file-preview.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useState } from 'react'
@@ -36,7 +35,7 @@ const PdfFilePreview = ({ downloadUrl }: PdfFilePreviewProps) => {
           className="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-components-panel-bg shadow-md hover:bg-state-base-hover"
           aria-label="Zoom out"
         >
-          <RiZoomOutLine className="size-4 text-text-tertiary" />
+          <span className="i-ri-zoom-out-line size-4 text-text-tertiary" />
         </button>
         <button
           type="button"
@@ -44,7 +43,7 @@ const PdfFilePreview = ({ downloadUrl }: PdfFilePreviewProps) => {
           className="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-components-panel-bg shadow-md hover:bg-state-base-hover"
           aria-label="Zoom in"
         >
-          <RiZoomInLine className="size-4 text-text-tertiary" />
+          <span className="i-ri-zoom-in-line size-4 text-text-tertiary" />
         </button>
       </div>
 
diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
index 9f89a3a5c1..2202f1be05 100644
--- a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
@@ -1,4 +1,3 @@
-import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -74,7 +73,7 @@ const TableSelector = ({
             <span className={cn('min-w-0 max-w-[220px] truncate system-sm-medium', isPlaceholder && 'text-text-tertiary')}>
               {label}
             </span>
-            <RiArrowDownSLine className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
+            <span className="i-ri-arrow-down-s-line h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
           </button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[1002]">