Update icons.

package-lock.json

@@ -23,6 +23,7 @@
         "@chakra-ui/react": "2.5.5",
         "@emotion/react": "11.10.6",
         "@emotion/styled": "11.10.6",
+        "@tabler/icons-react": "2.16.0",
         "@types/assert": "1.5.6",
         "@types/codemirror": "5.60.7",
         "@types/express": "4.17.17",
@@ -2766,6 +2767,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.16.0.tgz",
+      "integrity": "sha512-1kaPH5APIWGtXe0W0eQ9g4MdfaQJ2gh95TAa94lNAqRR0JeC3fkD0yXGCcUiNK4GnGDv3UtPSCd3dbdKTe1b2A==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.16.0.tgz",
+      "integrity": "sha512-WwVjPzwvChmaQfhOjaVPyUjHeUosP2G1kqG6RfSkOWWiGx46nfZG7ekuBDidXuvMdTP1o2iC9JJIGm6mz3k5Uw==",
+      "dev": true,
+      "dependencies": {
+        "@tabler/icons": "2.16.0",
+        "prop-types": "^15.7.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -12325,6 +12353,22 @@
         "defer-to-connect": "^2.0.0"
       }
     },
+    "@tabler/icons": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.16.0.tgz",
+      "integrity": "sha512-1kaPH5APIWGtXe0W0eQ9g4MdfaQJ2gh95TAa94lNAqRR0JeC3fkD0yXGCcUiNK4GnGDv3UtPSCd3dbdKTe1b2A==",
+      "dev": true
+    },
+    "@tabler/icons-react": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.16.0.tgz",
+      "integrity": "sha512-WwVjPzwvChmaQfhOjaVPyUjHeUosP2G1kqG6RfSkOWWiGx46nfZG7ekuBDidXuvMdTP1o2iC9JJIGm6mz3k5Uw==",
+      "dev": true,
+      "requires": {
+        "@tabler/icons": "2.16.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",

package.json

@@ -38,6 +38,7 @@
     "@chakra-ui/react": "2.5.5",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
+    "@tabler/icons-react": "2.16.0",
     "@types/assert": "1.5.6",
     "@types/codemirror": "5.60.7",
     "@types/express": "4.17.17",

src/renderer/components/History.tsx

@@ -33,10 +33,10 @@ import clsx from 'clsx'
 import dayjs from 'dayjs'
 import prettyBytes from 'pretty-bytes'
 import React, { useState } from 'react'
-import { BiDetail, BiHelpCircle, BiHistory, BiTrash } from 'react-icons/bi'
-import useConfigs from '../models/useConfigs'
-import useI18n from '../models/useI18n'
+import useConfigs from '@renderer/models/useConfigs'
+import useI18n from '@renderer/models/useI18n'
 import styles from './History.module.scss'
+import { IconFileTime, IconHelpCircle, IconHistory, IconX } from '@tabler/icons-react'
 
 interface IHistoryProps {
   list: IHostsHistoryObject[]
@@ -73,7 +73,7 @@ const HistoryList = (props: IHistoryProps): React.ReactElement => {
           >
             <HStack>
               <Box>
-                <BiDetail />
+                <IconFileTime size={16} />
               </Box>
               <VStack align="left" spacing={0}>
                 <Box>{dayjs(item.add_time_ms).format('YYYY-MM-DD HH:mm:ss')}</Box>
@@ -152,7 +152,9 @@ const History = () => {
 
   useOnBroadcast(events.show_history, () => {
     setIsOpen(true)
-    loadData()
+    loadData().catch((e) => {
+      console.error(e)
+    })
   })
 
   let history_limit_values: number[] = [10, 50, 100, 500]
@@ -175,7 +177,7 @@ const History = () => {
         <DrawerHeader>
           <HStack>
             <Box mr={1}>
-              <BiHistory />
+              <IconHistory size={16} />
             </Box>
             <Box>{lang.system_hosts_history}</Box>
           </HStack>
@@ -208,12 +210,12 @@ const History = () => {
             </Box>
             <Tooltip label={lang.system_hosts_history_help} aria-label="A tooltip">
               <Box ml={3}>
-                <BiHelpCircle />
+                <IconHelpCircle size={16} />
               </Box>
             </Tooltip>
             <Spacer />
             <Button
-              leftIcon={<BiTrash />}
+              leftIcon={<IconX size={16} />}
               variant="outline"
               mr={3}
               colorScheme="pink"

src/renderer/components/ItemIcon.tsx

@@ -6,14 +6,13 @@
 
 import React from 'react'
 import {
-  BiDesktop,
-  BiFile,
-  BiFolder,
-  BiFolderOpen,
-  BiGlobe,
-  BiLayer,
-  BiTrash,
-} from 'react-icons/bi'
+  IconDeviceDesktop,
+  IconFileText,
+  IconFolder,
+  IconStack2,
+  IconTrash,
+  IconWorld,
+} from '@tabler/icons-react'
 
 interface Props {
   type?: string
@@ -25,17 +24,17 @@ const ItemIcon = (props: Props) => {
 
   switch (type) {
     case 'folder':
-      return is_collapsed ? <BiFolder /> : <BiFolderOpen />
+      return is_collapsed ? <IconFolder size={16} /> : <IconFolder size={16} />
     case 'remote':
-      return <BiGlobe />
+      return <IconWorld size={16} />
     case 'group':
-      return <BiLayer />
+      return <IconStack2 size={16} />
     case 'system':
-      return <BiDesktop />
+      return <IconDeviceDesktop size={16} />
     case 'trashcan':
-      return <BiTrash />
+      return <IconTrash size={16} />
     default:
-      return <BiFile />
+      return <IconFileText size={16} />
   }
 }
 

src/renderer/components/Pref/index.tsx

@@ -29,11 +29,11 @@ import events from '@common/events'
 import useConfigs from '@renderer/models/useConfigs'
 import useI18n from '@renderer/models/useI18n'
 import React, { useEffect, useState } from 'react'
-import { BiSliderAlt } from 'react-icons/bi'
 import Advanced from './Advanced'
 import Commands from './Commands'
 import General from './General'
 import styles from './styles.module.scss'
+import { IconAdjustments } from '@tabler/icons-react'
 
 const PreferencePanel = () => {
   const [is_open, setIsOpen] = useState(false)
@@ -84,7 +84,7 @@ const PreferencePanel = () => {
         <DrawerHeader>
           <HStack>
             <Box mr={1}>
-              <BiSliderAlt />
+              <IconAdjustments size={16} />
             </Box>
             <Box>{lang.preferences}</Box>
           </HStack>

src/renderer/components/TopBar/ConfigMenu.tsx

@@ -21,17 +21,18 @@ import useHostsData from '@renderer/models/useHostsData'
 import useI18n from '@renderer/models/useI18n'
 import React, { useState } from 'react'
 import {
-  BiCog,
-  BiExit,
-  BiExport,
-  BiHomeCircle,
-  BiImport,
-  BiInfoCircle,
-  BiMessageDetail,
-  BiRefresh,
-  BiSliderAlt,
-  BiWrench,
-} from 'react-icons/bi'
+  IconAdjustments,
+  IconCloudDownload,
+  IconCode,
+  IconDownload,
+  IconHome,
+  IconInfoCircle,
+  IconLogout,
+  IconMessage2,
+  IconRefresh,
+  IconSettings,
+  IconUpload,
+} from '@tabler/icons-react'
 import styles from './ConfigMenu.module.scss'
 
 const ConfigMenu = () => {
@@ -44,7 +45,7 @@ const ConfigMenu = () => {
     <>
       <Menu>
         <MenuButton as={Button} variant="ghost" width="35px" px="10.5px">
-          <BiCog />
+          <IconSettings size={16} />
         </MenuButton>
         <MenuList
           borderColor="var(--swh-border-color-0)"
@@ -52,14 +53,17 @@ const ConfigMenu = () => {
           maxH={'calc(100vh - 80px)'}
           overflowY={'scroll'}
         >
-          <MenuItem icon={<BiInfoCircle />} onClick={() => agent.broadcast(events.show_about)}>
+          <MenuItem
+            icon={<IconInfoCircle size={16} />}
+            onClick={() => agent.broadcast(events.show_about)}
+          >
             {lang.about}
           </MenuItem>
 
           <MenuDivider />
 
           <MenuItem
-            icon={<BiRefresh />}
+            icon={<IconRefresh size={16} />}
             onClick={async () => {
               let r = await actions.checkUpdate()
               if (r === false) {
@@ -81,17 +85,17 @@ const ConfigMenu = () => {
           >
             {lang.check_update}
           </MenuItem>
-          <MenuItem icon={<BiMessageDetail />} onClick={() => actions.openUrl(feedback_url)}>
+          <MenuItem icon={<IconMessage2 size={16} />} onClick={() => actions.openUrl(feedback_url)}>
             {lang.feedback}
           </MenuItem>
-          <MenuItem icon={<BiHomeCircle />} onClick={() => actions.openUrl(homepage_url)}>
+          <MenuItem icon={<IconHome size={16} />} onClick={() => actions.openUrl(homepage_url)}>
             {lang.homepage}
           </MenuItem>
 
           <MenuDivider />
 
           <MenuItem
-            icon={<BiExport />}
+            icon={<IconUpload size={16} />}
             onClick={async () => {
               let r = await actions.exportData()
               if (r === null) {
@@ -114,7 +118,7 @@ const ConfigMenu = () => {
             {lang.export}
           </MenuItem>
           <MenuItem
-            icon={<BiImport />}
+            icon={<IconDownload size={16} />}
             onClick={async () => {
               let r = await actions.importData()
               if (r === null) {
@@ -144,7 +148,7 @@ const ConfigMenu = () => {
             {lang.import}
           </MenuItem>
           <MenuItem
-            icon={<BiImport />}
+            icon={<IconCloudDownload size={16} />}
             onClick={async () => {
               setShowImportFromUrl(true)
             }}
@@ -154,16 +158,19 @@ const ConfigMenu = () => {
 
           <MenuDivider />
 
-          <MenuItem icon={<BiSliderAlt />} onClick={() => agent.broadcast(events.show_preferences)}>
+          <MenuItem
+            icon={<IconAdjustments size={16} />}
+            onClick={() => agent.broadcast(events.show_preferences)}
+          >
             {lang.preferences}
           </MenuItem>
-          <MenuItem icon={<BiWrench />} onClick={() => actions.cmdToggleDevTools()}>
+          <MenuItem icon={<IconCode size={16} />} onClick={() => actions.cmdToggleDevTools()}>
             {lang.toggle_developer_tools}
           </MenuItem>
 
           <MenuDivider />
 
-          <MenuItem icon={<BiExit />} onClick={() => actions.quit()}>
+          <MenuItem icon={<IconLogout size={16} />} onClick={() => actions.quit()}>
             {lang.quit}
           </MenuItem>
         </MenuList>

src/renderer/components/TopBar/index.tsx

@@ -14,7 +14,13 @@ import events from '@common/events'
 import useHostsData from '@renderer/models/useHostsData'
 import useI18n from '@renderer/models/useI18n'
 import React, { useEffect, useState } from 'react'
-import { BiHistory, BiPlus, BiSidebar, BiX } from 'react-icons/bi'
+import { BiX } from 'react-icons/bi'
+import {
+  IconHistory,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+  IconPlus,
+} from '@tabler/icons-react'
 import styles from './index.module.scss'
 
 interface IProps {
@@ -54,7 +60,13 @@ export default (props: IProps) => {
       <Flex align="center" className={styles.left}>
         <IconButton
           aria-label="Toggle sidebar"
-          icon={<BiSidebar />}
+          icon={
+            show_left_panel ? (
+              <IconLayoutSidebarLeftCollapse size={16} />
+            ) : (
+              <IconLayoutSidebarLeftExpand size={16} />
+            )
+          }
           onClick={() => {
             agent.broadcast(events.toggle_left_panel, !show_left_panel)
           }}
@@ -63,7 +75,7 @@ export default (props: IProps) => {
         />
         <IconButton
           aria-label="Add"
-          icon={<BiPlus />}
+          icon={<IconPlus size={16} />}
           onClick={() => agent.broadcast(events.add_new)}
           variant="ghost"
         />
@@ -107,7 +119,7 @@ export default (props: IProps) => {
         {show_history ? (
           <IconButton
             aria-label="Show history"
-            icon={<BiHistory />}
+            icon={<IconHistory size={16} />}
             variant="ghost"
             onClick={() => agent.broadcast(events.show_history)}
           />