perf: auto load icons (#688)

* perf: icon

* perf: icon

* doc

* perf: simple edit ui

* doc

* doc

* doc

* doc

projects/app/src/pages/chat/components/ChatHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Flex, useTheme, Box } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import Tag from '@/components/Tag';
 import Avatar from '@/components/Avatar';
 import ToolMenu from './ToolMenu';

projects/app/src/pages/chat/components/ChatHistorySlider.tsx

@@ -15,7 +15,7 @@ import { useEditTitle } from '@/web/common/hooks/useEditTitle';
 import { useRouter } from 'next/router';
 import Avatar from '@/components/Avatar';
 import MyTooltip from '@/components/MyTooltip';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 import { useConfirm } from '@/web/common/hooks/useConfirm';
 import Tabs from '@/components/Tabs';
@@ -156,7 +156,7 @@ const ChatHistorySlider = ({
           h={'100%'}
           color={'primary.600'}
           borderRadius={'xl'}
-          leftIcon={<MyIcon name={'chat'} w={'16px'} />}
+          leftIcon={<MyIcon name={'core/chat/chatLight'} w={'16px'} />}
           overflow={'hidden'}
           onClick={() => onChangeChat()}
         >
@@ -173,7 +173,7 @@ const ChatHistorySlider = ({
             borderRadius={'50%'}
             onClick={openConfirm(onClearHistory)}
           >
-            <MyIcon name={'clear'} w={'16px'} />
+            <MyIcon name={'common/clearLight'} w={'16px'} />
           </IconButton>
         )}
       </Flex>
@@ -211,7 +211,10 @@ const ChatHistorySlider = ({
                       }
                     })}
               >
-                <MyIcon name={item.id === activeChatId ? 'chatFill' : 'chat'} w={'16px'} />
+                <MyIcon
+                  name={item.id === activeChatId ? 'core/chat/chatFill' : 'core/chat/chatLight'}
+                  w={'16px'}
+                />
                 <Box flex={'1 0 0'} ml={3} className="textEllipsis">
                   {item.customTitle || item.title}
                 </Box>
@@ -236,7 +239,7 @@ const ChatHistorySlider = ({
                               onSetHistoryTop({ chatId: item.id, top: !item.top });
                             }}
                           >
-                            <MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
+                            <MyIcon mr={2} name={'core/chat/setTopLight'} w={'16px'}></MyIcon>
                             {item.top ? '取消置顶' : '置顶'}
                           </MenuItem>
                         )}
@@ -254,7 +257,7 @@ const ChatHistorySlider = ({
                               });
                             }}
                           >
-                            <MyIcon mr={2} name={'customTitle'} w={'16px'}></MyIcon>
+                            <MyIcon mr={2} name={'common/customTitleLight'} w={'16px'}></MyIcon>
                             {t('common.Custom Title')}
                           </MenuItem>
                         )}
@@ -326,7 +329,7 @@ const ChatHistorySlider = ({
         >
           <IconButton
             mr={3}
-            icon={<MyIcon name={'backFill'} w={'18px'} color={'primary.500'} />}
+            icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
             bg={'white'}
             boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
             size={'smSquare'}

projects/app/src/pages/chat/components/SliderApps.tsx

@@ -3,7 +3,7 @@ import { Flex, Box, IconButton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import Avatar from '@/components/Avatar';
 import { useAppStore } from '@/web/core/app/store/useAppStore';
 
@@ -28,7 +28,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
         >
           <IconButton
             mr={3}
-            icon={<MyIcon name={'backFill'} w={'18px'} color={'primary.500'} />}
+            icon={<MyIcon name={'common/backFill'} w={'18px'} color={'primary.500'} />}
             bg={'white'}
             boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
             size={'smSquare'}

projects/app/src/pages/chat/components/ToolMenu.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { useChatBox } from '@/components/ChatBox';
 import type { ChatItemType } from '@fastgpt/global/core/chat/type.d';
 import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
-import MyIcon from '@/components/Icon';
+import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useRouter } from 'next/router';
 
 const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
@@ -12,7 +12,7 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
   const menuList = useMemo(
     () => [
       {
-        icon: 'chat',
+        icon: 'core/chat/chatLight',
         label: '新对话',
         onClick: () => {
           router.replace({
@@ -24,16 +24,16 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
         }
       },
       {
-        icon: 'apiLight',
+        icon: 'core/app/appApiLight',
         label: 'HTML导出',
         onClick: () => onExportChat({ type: 'html', history })
       },
       {
-        icon: 'markdown',
+        icon: 'file/markdown',
         label: 'Markdown导出',
         onClick: () => onExportChat({ type: 'md', history })
       },
-      { icon: 'pdf', label: 'PDF导出', onClick: () => onExportChat({ type: 'pdf', history }) }
+      { icon: 'file/pdf', label: 'PDF导出', onClick: () => onExportChat({ type: 'pdf', history }) }
     ],
     [history, onExportChat, router]
   );