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.
This commit is contained in:
yyh
2026-02-09 19:51:05 +08:00
parent db0c527ce8
commit 9e10b73b54
23 changed files with 60 additions and 95 deletions

View File

@ -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>

View File

@ -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>