feat: new icons (#5412)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

@@ -4,6 +4,16 @@ import { useUnmount } from 'ahooks'
 import React, { useCallback, useEffect, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 import cn from 'classnames'
+import {
+  RiDashboard2Fill,
+  RiDashboard2Line,
+  RiFileList3Fill,
+  RiFileList3Line,
+  RiTerminalBoxFill,
+  RiTerminalBoxLine,
+  RiTerminalWindowFill,
+  RiTerminalWindowLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import s from './style.module.css'
@@ -13,8 +23,6 @@ import type { NavIcon } from '@/app/components/app-sidebar/navLink'
 import { fetchAppDetail } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
 import Loading from '@/app/components/base/loading'
-import { BarChartSquare02, FileHeart02, PromptEngineering, TerminalSquare } from '@/app/components/base/icons/src/vender/line/development'
-import { BarChartSquare02 as BarChartSquare02Solid, FileHeart02 as FileHeart02Solid, PromptEngineering as PromptEngineeringSolid, TerminalSquare as TerminalSquareSolid } from '@/app/components/base/icons/src/vender/solid/development'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 export type IAppDetailLayoutProps = {
@@ -51,16 +59,16 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
         ? [{
           name: t('common.appMenus.promptEng'),
           href: `/app/${appId}/${(mode === 'workflow' || mode === 'advanced-chat') ? 'workflow' : 'configuration'}`,
-          icon: PromptEngineering,
-          selectedIcon: PromptEngineeringSolid,
+          icon: RiTerminalWindowLine,
+          selectedIcon: RiTerminalWindowFill,
         }]
         : []
       ),
       {
         name: t('common.appMenus.apiAccess'),
         href: `/app/${appId}/develop`,
-        icon: TerminalSquare,
-        selectedIcon: TerminalSquareSolid,
+        icon: RiTerminalBoxLine,
+        selectedIcon: RiTerminalBoxFill,
       },
       ...(isCurrentWorkspaceManager
         ? [{
@@ -68,16 +76,16 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
             ? t('common.appMenus.logAndAnn')
             : t('common.appMenus.logs'),
           href: `/app/${appId}/logs`,
-          icon: FileHeart02,
-          selectedIcon: FileHeart02Solid,
+          icon: RiFileList3Line,
+          selectedIcon: RiFileList3Fill,
         }]
         : []
       ),
       {
         name: t('common.appMenus.overview'),
         href: `/app/${appId}/overview`,
-        icon: BarChartSquare02,
-        selectedIcon: BarChartSquare02Solid,
+        icon: RiDashboard2Line,
+        selectedIcon: RiDashboard2Fill,
       },
     ]
     return navs

web/app/(commonLayout)/apps/AppCard.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiMoreFill } from '@remixicon/react'
 import s from './style.module.css'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
@@ -22,7 +23,6 @@ import { useProviderContext } from '@/context/provider-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
-import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import EditAppModal from '@/app/components/explore/create-app-modal'
 import SwitchAppModal from '@/app/components/app/switch-app-modal'
@@ -310,7 +310,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                     <div
                       className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
                     >
-                      <DotsHorizontal className='w-4 h-4 text-gray-700' />
+                      <RiMoreFill className='w-4 h-4 text-gray-700' />
                     </div>
                   }
                   btnClassName={open =>

web/app/(commonLayout)/apps/Apps.tsx

@@ -4,6 +4,12 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
+import {
+  RiApps2Line,
+  RiExchange2Line,
+  RiMessage3Line,
+  RiRobot3Line,
+} from '@remixicon/react'
 import AppCard from './AppCard'
 import NewAppCard from './NewAppCard'
 import useAppsQueryState from './hooks/useAppsQueryState'
@@ -14,12 +20,6 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { CheckModal } from '@/hooks/use-pay'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
-import { DotsGrid } from '@/app/components/base/icons/src/vender/line/general'
-import {
-  ChatBot,
-  CuteRobot,
-} from '@/app/components/base/icons/src/vender/line/communication'
-import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
 import SearchInput from '@/app/components/base/search-input'
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import TagManagementModal from '@/app/components/base/tag-management'
@@ -73,10 +73,10 @@ const Apps = () => {
 
   const anchorRef = useRef<HTMLDivElement>(null)
   const options = [
-    { value: 'all', text: t('app.types.all'), icon: <DotsGrid className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'chat', text: t('app.types.chatbot'), icon: <ChatBot className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'agent-chat', text: t('app.types.agent'), icon: <CuteRobot className='w-[14px] h-[14px] mr-1' /> },
-    { value: 'workflow', text: t('app.types.workflow'), icon: <Route className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='w-[14px] h-[14px] mr-1' /> },
   ]
 
   useEffect(() => {

web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -5,6 +5,9 @@ import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiMoreFill,
+} from '@remixicon/react'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
 import { deleteDataset } from '@/service/datasets'
@@ -14,7 +17,6 @@ import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
 import type { HtmlContentProps } from '@/app/components/base/popover'
 import CustomPopover from '@/app/components/base/popover'
 import Divider from '@/app/components/base/divider'
-import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import RenameDatasetModal from '@/app/components/datasets/rename-modal'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import TagSelector from '@/app/components/base/tag-management/selector'
@@ -167,7 +169,7 @@ const DatasetCard = ({
                 <div
                   className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
                 >
-                  <DotsHorizontal className='w-4 h-4 text-gray-700' />
+                  <RiMoreFill className='w-4 h-4 text-gray-700' />
                 </div>
               }
               btnClassName={open =>

web/app/(commonLayout)/datasets/NewDatasetCard.tsx

@@ -2,7 +2,9 @@
 
 import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 
 const CreateAppCard = forwardRef<HTMLAnchorElement>((_, ref) => {
   const { t } = useTranslation()
@@ -11,7 +13,7 @@ const CreateAppCard = forwardRef<HTMLAnchorElement>((_, ref) => {
     <a ref={ref} className='group flex flex-col col-span-1 bg-gray-200 border-[0.5px] border-black/5 rounded-xl min-h-[160px] transition-all duration-200 ease-in-out cursor-pointer hover:bg-white hover:shadow-lg' href='/datasets/create'>
       <div className='shrink-0 flex items-center p-4 pb-3'>
         <div className='w-10 h-10 flex items-center justify-center border border-gray-200 bg-gray-100 rounded-lg'>
-          <Plus className='w-4 h-4 text-gray-500'/>
+          <RiAddLine className='w-4 h-4 text-gray-500'/>
         </div>
         <div className='ml-3 text-sm font-semibold leading-5 text-gray-800 group-hover:text-primary-600'>{t('dataset.createDataset')}</div>
       </div>

web/app/(commonLayout)/list.module.css

@@ -85,13 +85,13 @@
   background-image: url("./apps/assets/add.svg");
 }
 
-.newItemIconChat {
+/* .newItemIconChat {
   background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot.svg");
 }
 
 .selected .newItemIconChat {
   background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg");
-}
+} */
 
 .newItemIconComplete {
   background-image: url("./apps/assets/completion.svg");