refactor(skill): replace React icon components with CSS Icons

Migrate all icon usage in the skill directory from @remixicon/react and custom SVG components to Tailwind CSS icon classes (i-ri-*, i-custom-*). Update MenuItem API to accept string class names instead of React.ElementType.
2026-01-29 21:57:17 +08:00 · 2026-01-29 21:57:17 +08:00 · 919d7ef5cd
parent a886bfef8a
commit 919d7ef5cd
19 changed files with 60 additions and 104 deletions
--- 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, RiQuestionLine } 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" />
@ -95,8 +94,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>
@ -162,7 +161,7 @@ const FilePickerPanel = ({
          <span className="flex-1 text-[12px] font-medium uppercase leading-4 text-text-tertiary">
            {t('skillEditor.referenceFiles')}
          </span>
-          <RiQuestionLine className="size-4 text-text-tertiary" aria-hidden="true" />
+          <span className="i-ri-question-line size-4 text-text-tertiary" aria-hidden="true" />
        </div>
      )}
      <div
--- 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
@ -2,7 +2,6 @@ import type { LexicalNode } from 'lexical'
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { TreeNodeData } from '@/app/components/workflow/skill/type'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { RiFolderLine } from '@remixicon/react'
 import { $getNodeByKey } from 'lexical'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
@ -64,7 +63,7 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
        >
          <span className="flex items-center justify-center p-px">
            {isFolder
-              ? <RiFolderLine className="size-[14px] text-text-accent" aria-hidden="true" />
+              ? <span className="i-ri-folder-line size-[14px] text-text-accent" aria-hidden="true" />
              : (
                  <FileTypeIcon
                    type={(iconType || 'document') as FileAppearanceType}
--- 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
@ -2,13 +2,11 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 import type { Emoji } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-import { RiAlertFill } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Modal from '@/app/components/base/modal'
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@ -492,7 +490,7 @@ const ToolBlockComponent = ({
      {needAuthorization && (
        <div className="flex min-h-[200px] flex-1 flex-col items-center justify-center px-4 py-6 text-text-tertiary">
          <div className="flex h-9 w-9 items-center justify-center rounded-full border border-divider-subtle">
-            <InfoCircle className="h-4 w-4 text-text-tertiary" />
+            <span className="i-custom-vender-line-general-info-circle h-4 w-4 text-text-tertiary" />
          </div>
          <div className="system-xs-regular mt-3 text-text-tertiary">
            {t('skillEditor.authorizationRequired', { ns: 'workflow' })}
@ -536,7 +534,7 @@ const ToolBlockComponent = ({
        {needAuthorization && (
          <span className="system-2xs-medium-uppercase flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning">
            {authBadgeLabel}
-            <RiAlertFill className="h-3 w-3" />
+            <span className="i-ri-alert-fill h-3 w-3" />
          </span>
        )}
      </span>
--- 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
@ -3,7 +3,6 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 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 { RiAlertFill, RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
@ -650,7 +649,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 && (
@ -741,7 +740,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>
@ -798,7 +797,7 @@ const ToolGroupBlockComponent = ({
          ? (
              <span className="system-2xs-medium-uppercase flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning">
                {authBadgeLabel}
-                <RiAlertFill className="h-3 w-3" />
+                <span className="i-ri-alert-fill h-3 w-3" />
              </span>
            )
          : (
--- 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>
--- a/web/app/components/workflow/skill/file-tab-item.tsx
+++ b/web/app/components/workflow/skill/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>
  )
--- a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
@ -1,11 +1,9 @@
 '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'
-import FolderSpark from '@/app/components/base/icons/src/vender/workflow/FolderSpark'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { useAppContext } from '@/context/app-context'
 import { useDownloadSandboxFile, useSandboxFilesTree } from '@/service/use-sandbox-file'
@ -67,7 +65,7 @@ const ArtifactsSection = ({ className }: ArtifactsSectionProps) => {
        >
          <div className="flex flex-1 items-center gap-1 py-0.5">
            <div className="flex size-5 items-center justify-center">
-              <FolderSpark className="size-4 text-text-secondary" aria-hidden="true" />
+              <span className="i-custom-vender-workflow-folder-spark size-4 text-text-secondary" aria-hidden="true" />
            </div>
            <span className="system-sm-semibold uppercase text-text-secondary">
              {t('skillSidebar.artifacts.title')}
@ -76,15 +74,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>
--- a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
+++ b/web/app/components/workflow/skill/file-tree/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>
--- a/web/app/components/workflow/skill/file-tree/index.tsx
+++ b/web/app/components/workflow/skill/file-tree/index.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'
@ -12,7 +11,6 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Tree } from 'react-arborist'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import SearchMenu from '@/app/components/base/icons/src/vender/knowledge/SearchMenu'
 import Loading from '@/app/components/base/loading'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
@ -81,7 +79,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>
@ -348,7 +346,7 @@ const FileTree = ({ className }: FileTreeProps) => {
    return (
      <div className={cn('flex min-h-[150px] flex-1 flex-col overflow-y-auto', className)}>
        <div className="flex flex-1 flex-col items-center justify-center gap-2 pb-20">
-          <SearchMenu className="size-8 text-text-tertiary" aria-hidden="true" />
+          <span className="i-custom-vender-knowledge-search-menu size-8 text-text-tertiary" aria-hidden="true" />
          <span className="system-xs-regular text-text-secondary">
            {t('skillSidebar.searchNoResults')}
          </span>
--- a/web/app/components/workflow/skill/file-tree/menu-item.tsx
+++ b/web/app/components/workflow/skill/file-tree/menu-item.tsx
@ -50,14 +50,14 @@ const labelVariants = cva('system-sm-regular text-text-secondary', {
 })

 export type MenuItemProps = {
-  icon: React.ElementType
+  icon: string
  label: string
  kbd?: readonly string[]
  onClick: React.MouseEventHandler<HTMLButtonElement>
  disabled?: boolean
 } & VariantProps<typeof menuItemVariants>

-const MenuItem = ({ icon: Icon, label, kbd, onClick, disabled, variant }: MenuItemProps) => {
+const MenuItem = ({ icon, label, kbd, onClick, disabled, variant }: MenuItemProps) => {
  const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    onClick(event)
@ -70,7 +70,7 @@ const MenuItem = ({ icon: Icon, label, kbd, onClick, disabled, variant }: MenuIt
      disabled={disabled}
      className={cn(menuItemVariants({ variant }))}
    >
-      <Icon className={cn(iconVariants({ variant }))} aria-hidden="true" />
+      <span className={cn(icon, 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" />}
    </button>
--- a/web/app/components/workflow/skill/file-tree/node-menu.tsx
+++ b/web/app/components/workflow/skill/file-tree/node-menu.tsx
@ -3,21 +3,10 @@
 import type { NodeApi, TreeApi } from 'react-arborist'
 import type { NodeMenuType } from '../constants'
 import type { TreeNodeData } from '../type'
-import {
-  RiClipboardLine,
-  RiDeleteBinLine,
-  RiEdit2Line,
-  RiFileAddLine,
-  RiFolderAddLine,
-  RiFolderUploadLine,
-  RiScissorsLine,
-  RiUploadLine,
-} from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
-import { Download02 } from '@/app/components/base/icons/src/vender/solid/general'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
 import { NODE_MENU_TYPE } from '../constants'
@ -119,13 +108,13 @@ const NodeMenu = ({
          />

          <MenuItem
-            icon={RiFileAddLine}
+            icon="i-ri-file-add-line"
            label={t('skillSidebar.menu.newFile')}
            onClick={handleNewFile}
            disabled={isLoading}
          />
          <MenuItem
-            icon={RiFolderAddLine}
+            icon="i-ri-folder-add-line"
            label={t('skillSidebar.menu.newFolder')}
            onClick={handleNewFolder}
            disabled={isLoading}
@ -134,13 +123,13 @@ const NodeMenu = ({
          <div className="my-1 h-px bg-divider-subtle" />

          <MenuItem
-            icon={RiUploadLine}
+            icon="i-ri-upload-line"
            label={t('skillSidebar.menu.uploadFile')}
            onClick={() => fileInputRef.current?.click()}
            disabled={isLoading}
          />
          <MenuItem
-            icon={RiFolderUploadLine}
+            icon="i-ri-folder-upload-line"
            label={t('skillSidebar.menu.uploadFolder')}
            onClick={() => folderInputRef.current?.click()}
            disabled={isLoading}
@ -153,7 +142,7 @@ const NodeMenu = ({
      {!isFolder && (
        <>
          <MenuItem
-            icon={Download02}
+            icon="i-custom-vender-solid-general-download-02"
            label={t('skillSidebar.menu.download')}
            onClick={handleDownload}
            disabled={isLoading}
@ -165,7 +154,7 @@ const NodeMenu = ({
      {!isRoot && (
        <>
          <MenuItem
-            icon={RiScissorsLine}
+            icon="i-ri-scissors-line"
            label={t('skillSidebar.menu.cut')}
            kbd={KBD_CUT}
            onClick={handleCut}
@ -176,7 +165,7 @@ const NodeMenu = ({

      {isFolder && hasClipboard && (
        <MenuItem
-          icon={RiClipboardLine}
+          icon="i-ri-clipboard-line"
          label={t('skillSidebar.menu.paste')}
          kbd={KBD_PASTE}
          onClick={handlePaste}
@ -188,13 +177,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}
--- a/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx
+++ b/web/app/components/workflow/skill/file-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>
    )
  }
--- a/web/app/components/workflow/skill/file-tree/tree-node.tsx
+++ b/web/app/components/workflow/skill/file-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]">
--- a/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
+++ b/web/app/components/workflow/skill/file-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>
--- a/web/app/components/workflow/skill/sidebar-search-add.tsx
+++ b/web/app/components/workflow/skill/sidebar-search-add.tsx
@ -1,12 +1,5 @@
 'use client'

-import {
-  RiAddLine,
-  RiFileAddLine,
-  RiFolderAddLine,
-  RiFolderUploadLine,
-  RiUploadLine,
-} from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@ -25,13 +18,13 @@ import { useSkillAssetTreeData } from './hooks/use-skill-asset-tree'
 import { getTargetFolderIdFromSelection } from './utils/tree-utils'

 type MenuItemProps = {
-  icon: React.ElementType
+  icon: string
  label: string
  onClick: () => void
  disabled?: boolean
 }

-const MenuItem = ({ icon: Icon, label, onClick, disabled }: MenuItemProps) => (
+const MenuItem = ({ icon, label, onClick, disabled }: MenuItemProps) => (
  <button
    type="button"
    onClick={onClick}
@ -42,7 +35,7 @@ const MenuItem = ({ icon: Icon, label, onClick, disabled }: MenuItemProps) => (
      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
    )}
  >
-    <Icon className="size-4 text-text-tertiary" aria-hidden="true" />
+    <span className={cn(icon, 'size-4 text-text-tertiary')} aria-hidden="true" />
    <span className="system-sm-regular text-text-secondary">
      {label}
    </span>
@ -100,7 +93,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]">
@ -122,13 +115,13 @@ const SidebarSearchAdd = () => {
            />

            <MenuItem
-              icon={RiFileAddLine}
+              icon="i-ri-file-add-line"
              label={t('skillSidebar.menu.newFile')}
              onClick={handleNewFile}
              disabled={isLoading}
            />
            <MenuItem
-              icon={RiFolderAddLine}
+              icon="i-ri-folder-add-line"
              label={t('skillSidebar.menu.newFolder')}
              onClick={handleNewFolder}
              disabled={isLoading}
@ -137,13 +130,13 @@ const SidebarSearchAdd = () => {
            <div className="my-1 h-px bg-divider-subtle" />

            <MenuItem
-              icon={RiUploadLine}
+              icon="i-ri-upload-line"
              label={t('skillSidebar.menu.uploadFile')}
              onClick={() => fileInputRef.current?.click()}
              disabled={isLoading}
            />
            <MenuItem
-              icon={RiFolderUploadLine}
+              icon="i-ri-folder-upload-line"
              label={t('skillSidebar.menu.uploadFolder')}
              onClick={() => folderInputRef.current?.click()}
              disabled={isLoading}
--- a/web/app/components/workflow/skill/start-tab-item.tsx
+++ b/web/app/components/workflow/skill/start-tab-item.tsx
@ -2,7 +2,6 @@

 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Home from '@/app/components/base/icons/src/vender/workflow/Home'
 import { cn } from '@/utils/classnames'

 type StartTabItemProps = {
@ -32,8 +31,8 @@ const StartTabItem = ({
        onClick={onClick}
      >
        <div className="flex size-5 shrink-0 items-center justify-center">
-          <Home className={cn(
-            'size-4',
+          <span className={cn(
+            'i-custom-vender-workflow-home size-4',
            isActive ? 'text-text-secondary' : 'text-text-tertiary',
          )}
          />
--- 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 { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionCard from './action-card'
@ -11,12 +10,12 @@ const CreateImportSection = () => {
  return (
    <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')}
      />
      <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')}
      />
--- a/web/app/components/workflow/skill/start-tab/template-search.tsx
+++ b/web/app/components/workflow/skill/start-tab/template-search.tsx
@ -1,6 +1,5 @@
 'use client'

-import { RiSearchLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'

@ -17,7 +16,7 @@ const TemplateSearch = ({

  return (
    <div className="flex shrink-0 items-center gap-0.5 rounded-md bg-components-input-bg-normal p-2">
-      <RiSearchLine className="size-4 shrink-0 text-text-placeholder" aria-hidden="true" />
+      <span className="i-ri-search-line size-4 shrink-0 text-text-placeholder" aria-hidden="true" />
      <input
        type="text"
        name="template-search"
--- 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,9 +1,6 @@
-import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import { TableCells } from '@/app/components/base/icons/src/vender/solid/development'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@ -40,7 +37,7 @@ const TableSelector = ({
  if (isSingleTable) {
    return (
      <div className="inline-flex items-center gap-1 rounded-[6px] px-1.5 py-1 text-text-secondary">
-        <TableCells className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
+        <span className="i-custom-vender-solid-development-table-cells h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
        <span className={cn('system-sm-medium min-w-0 max-w-[220px] truncate', isPlaceholder && 'text-text-tertiary')}>
          {label}
        </span>
@ -70,11 +67,11 @@ const TableSelector = ({
              isLoading ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-state-base-hover',
            )}
          >
-            <TableCells className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
+            <span className="i-custom-vender-solid-development-table-cells h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
            <span className={cn('system-sm-medium min-w-0 max-w-[220px] truncate', 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-20">
@ -93,10 +90,10 @@ const TableSelector = ({
                  setOpen(false)
                }}
              >
-                <TableCells className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
+                <span className="i-custom-vender-solid-development-table-cells h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
                <span className="flex-1 truncate px-1">{item.name}</span>
                {item.value === selectedTable && (
-                  <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden="true" />
+                  <span className="i-custom-vender-line-general-check h-4 w-4 shrink-0 text-text-accent" aria-hidden="true" />
                )}
              </button>
            ))}