Use tabler icons react instead of tabler icons package

packages/ui/package.json

@@ -18,7 +18,7 @@
         "@mui/lab": "5.0.0-alpha.156",
         "@mui/material": "5.15.0",
         "@mui/x-data-grid": "6.8.0",
-        "@tabler/icons": "^1.39.1",
+        "@tabler/icons-react": "^3.3.0",
         "@uiw/codemirror-theme-sublime": "^4.21.21",
         "@uiw/codemirror-theme-vscode": "^4.21.21",
         "@uiw/react-codemirror": "^4.21.21",

packages/ui/src/ErrorBoundary.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 
 import { Box, Card, IconButton, Stack, Typography, useTheme } from '@mui/material'
-import { IconCopy } from '@tabler/icons'
+import { IconCopy } from '@tabler/icons-react'
 
 const ErrorBoundary = ({ error }) => {
     const theme = useTheme()

packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx

@@ -28,7 +28,7 @@ import Transitions from '@/ui-component/extended/Transitions'
 import AboutDialog from '@/ui-component/dialog/AboutDialog'
 
 // assets
-import { IconLogout, IconSettings, IconInfoCircle } from '@tabler/icons'
+import { IconLogout, IconSettings, IconInfoCircle } from '@tabler/icons-react'
 
 import './index.css'
 

packages/ui/src/layout/MainLayout/Header/index.jsx

@@ -13,7 +13,7 @@ import LogoSection from '../LogoSection'
 import ProfileSection from './ProfileSection'
 
 // assets
-import { IconMenu2 } from '@tabler/icons'
+import { IconMenu2 } from '@tabler/icons-react'
 
 // store
 import { SET_DARKMODE } from '@/store/actions'

packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.jsx

@@ -11,7 +11,7 @@ import NavItem from '../NavItem'
 
 // assets
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
-import { IconChevronDown, IconChevronUp } from '@tabler/icons'
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react'
 
 // ==============================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||============================== //
 

packages/ui/src/layout/MainLayout/ViewHeader.jsx

@@ -6,7 +6,7 @@ import { useTheme } from '@mui/material/styles'
 import { StyledFab } from '@/ui-component/button/StyledFab'
 
 // icons
-import { IconSearch, IconArrowLeft, IconEdit } from '@tabler/icons'
+import { IconSearch, IconArrowLeft, IconEdit } from '@tabler/icons-react'
 
 const ViewHeader = ({
     children,

packages/ui/src/menu-items/dashboard.js

@@ -1,5 +1,5 @@
 // assets
-import { IconHierarchy, IconBuildingStore, IconKey, IconTool, IconLock, IconRobot, IconVariable, IconFiles } from '@tabler/icons'
+import { IconHierarchy, IconBuildingStore, IconKey, IconTool, IconLock, IconRobot, IconVariable, IconFiles } from '@tabler/icons-react'
 
 // constant
 const icons = { IconHierarchy, IconBuildingStore, IconKey, IconTool, IconLock, IconRobot, IconVariable, IconFiles }

packages/ui/src/menu-items/settings.js

@@ -8,7 +8,7 @@ import {
     IconDatabaseExport,
     IconAdjustmentsHorizontal,
     IconUsers
-} from '@tabler/icons'
+} from '@tabler/icons-react'
 
 // constant
 const icons = {

packages/ui/src/ui-component/button/CopyToClipboardButton.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
-import { IconClipboard } from '@tabler/icons'
+import { IconClipboard } from '@tabler/icons-react'
 
 const CopyToClipboardButton = (props) => {
     const customization = useSelector((state) => state.customization)

packages/ui/src/ui-component/button/FlowListMenu.jsx

@@ -17,7 +17,7 @@ import VpnLockOutlinedIcon from '@mui/icons-material/VpnLockOutlined'
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined'
 import Button from '@mui/material/Button'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 import chatflowsApi from '@/api/chatflows'
 

packages/ui/src/ui-component/button/ThumbsDownButton.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
-import { IconThumbDown } from '@tabler/icons'
+import { IconThumbDown } from '@tabler/icons-react'
 
 const ThumbsDownButton = (props) => {
     const customization = useSelector((state) => state.customization)

packages/ui/src/ui-component/button/ThumbsUpButton.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
-import { IconThumbUp } from '@tabler/icons'
+import { IconThumbUp } from '@tabler/icons-react'
 
 const ThumbsUpButton = (props) => {
     const customization = useSelector((state) => state.customization)

packages/ui/src/ui-component/cards/DocumentStoreCard.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 // material-ui
 import { styled } from '@mui/material/styles'
 import { Box, Grid, Typography, useTheme } from '@mui/material'
-import { IconVectorBezier2, IconLanguage, IconScissors } from '@tabler/icons'
+import { IconVectorBezier2, IconLanguage, IconScissors } from '@tabler/icons-react'
 
 // project imports
 import MainCard from '@/ui-component/cards/MainCard'

packages/ui/src/ui-component/dialog/ManageScrapedLinksDialog.jsx

@@ -16,7 +16,7 @@ import {
     Stack,
     Typography
 } from '@mui/material'
-import { IconEraser, IconTrash, IconX } from '@tabler/icons'
+import { IconEraser, IconTrash, IconX } from '@tabler/icons-react'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 
 import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'

packages/ui/src/ui-component/dialog/ViewLeadsDialog.jsx

@@ -23,7 +23,7 @@ import {
     OutlinedInput
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconFileExport, IconSearch } from '@tabler/icons'
+import { IconFileExport, IconSearch } from '@tabler/icons-react'
 import leadsEmptySVG from '@/assets/images/leads_empty.svg'
 
 // store

packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx

@@ -31,7 +31,7 @@ import DatePicker from 'react-datepicker'
 import robotPNG from '@/assets/images/robot.png'
 import userPNG from '@/assets/images/account.png'
 import msgEmptySVG from '@/assets/images/message_empty.svg'
-import { IconFileExport, IconEraser, IconX, IconDownload } from '@tabler/icons'
+import { IconFileExport, IconEraser, IconX, IconDownload } from '@tabler/icons-react'
 
 // Project import
 import { MemoizedReactMarkdown } from '@/ui-component/markdown/MemoizedReactMarkdown'

packages/ui/src/ui-component/extended/AllowedDomains.jsx

@@ -5,7 +5,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 
 // material-ui
 import { Button, IconButton, OutlinedInput, Box, List, InputAdornment, Typography } from '@mui/material'
-import { IconX, IconTrash, IconPlus } from '@tabler/icons'
+import { IconX, IconTrash, IconPlus } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

packages/ui/src/ui-component/extended/AnalyseFlow.jsx

@@ -16,7 +16,7 @@ import {
     ListItemText
 } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'

packages/ui/src/ui-component/extended/Breadcrumbs.jsx

@@ -12,7 +12,7 @@ import config from '@/config'
 import { gridSpacing } from '@/store/constant'
 
 // assets
-import { IconTallymark1 } from '@tabler/icons'
+import { IconTallymark1 } from '@tabler/icons-react'
 import AccountTreeTwoToneIcon from '@mui/icons-material/AccountTreeTwoTone'
 import HomeIcon from '@mui/icons-material/Home'
 import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone'

packages/ui/src/ui-component/extended/ChatFeedback.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 // material-ui
 import { Button, Box } from '@mui/material'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

packages/ui/src/ui-component/extended/Leads.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 // material-ui
 import { Button, Box, OutlinedInput, Typography } from '@mui/material'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

packages/ui/src/ui-component/extended/RateLimit.jsx

@@ -10,7 +10,7 @@ import { StyledButton } from '@/ui-component/button/StyledButton'
 import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
 
 // Icons
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // API
 import chatflowsApi from '@/api/chatflows'

packages/ui/src/ui-component/extended/SpeechToText.jsx

@@ -5,7 +5,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 
 // material-ui
 import { Typography, Box, Button, FormControl, ListItem, ListItemAvatar, ListItemText, MenuItem, Select } from '@mui/material'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'

packages/ui/src/ui-component/extended/StarterPrompts.jsx

@@ -5,7 +5,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 
 // material-ui
 import { Button, IconButton, OutlinedInput, Box, List, InputAdornment } from '@mui/material'
-import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons'
+import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

packages/ui/src/ui-component/file/File.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useTheme } from '@mui/material/styles'
 import { FormControl, Button } from '@mui/material'
-import { IconUpload } from '@tabler/icons'
+import { IconUpload } from '@tabler/icons-react'
 import { getFileName } from '@/utils/genericHelper'
 
 export const File = ({ value, formDataUpload, fileType, onChange, onFormDataChange, disabled = false }) => {

packages/ui/src/ui-component/grid/DataGrid.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState, useCallback } from 'react'
 import { DataGrid as MUIDataGrid, GridActionsCellItem } from '@mui/x-data-grid'
-import { IconPlus } from '@tabler/icons'
+import { IconPlus } from '@tabler/icons-react'
 import { Button } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { cloneDeep } from 'lodash'

packages/ui/src/ui-component/markdown/CodeBlock.jsx

@@ -1,4 +1,4 @@
-import { IconClipboard, IconDownload } from '@tabler/icons'
+import { IconClipboard, IconDownload } from '@tabler/icons-react'
 import { memo, useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'

packages/ui/src/views/apikey/APIKeyDialog.jsx

@@ -21,7 +21,7 @@ import { useTheme } from '@mui/material/styles'
 import { StyledButton } from '@/ui-component/button/StyledButton'
 
 // Icons
-import { IconX, IconCopy } from '@tabler/icons'
+import { IconX, IconCopy } from '@tabler/icons-react'
 
 // API
 import apikeyApi from '@/api/apikey'

packages/ui/src/views/apikey/index.jsx

@@ -44,7 +44,7 @@ import useConfirm from '@/hooks/useConfirm'
 import useNotifier from '@/utils/useNotifier'
 
 // Icons
-import { IconTrash, IconEdit, IconCopy, IconChevronsUp, IconChevronsDown, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
+import { IconTrash, IconEdit, IconCopy, IconChevronsUp, IconChevronsDown, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons-react'
 import APIEmptySVG from '@/assets/images/api_empty.svg'
 
 // ==============================|| APIKey ||============================== //

packages/ui/src/views/assistants/AssistantDialog.jsx

@@ -32,7 +32,7 @@ import DeleteConfirmDialog from './DeleteConfirmDialog'
 import AssistantVectorStoreDialog from './AssistantVectorStoreDialog'
 
 // Icons
-import { IconX, IconPlus } from '@tabler/icons'
+import { IconX, IconPlus } from '@tabler/icons-react'
 
 // API
 import assistantsApi from '@/api/assistants'

packages/ui/src/views/assistants/AssistantVectorStoreDialog.jsx

@@ -16,7 +16,7 @@ import { Dropdown } from '@/ui-component/dropdown/Dropdown'
 import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'
 
 // Icons
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // API
 import assistantsApi from '@/api/assistants'

packages/ui/src/views/assistants/index.jsx

@@ -19,7 +19,7 @@ import assistantsApi from '@/api/assistants'
 import useApi from '@/hooks/useApi'
 
 // icons
-import { IconPlus, IconFileUpload } from '@tabler/icons'
+import { IconPlus, IconFileUpload } from '@tabler/icons-react'
 import ViewHeader from '@/layout/MainLayout/ViewHeader'
 import ErrorBoundary from '@/ErrorBoundary'
 

packages/ui/src/views/canvas/AddNodes.jsx

@@ -37,7 +37,7 @@ import Transitions from '@/ui-component/extended/Transitions'
 import { StyledFab } from '@/ui-component/button/StyledFab'
 
 // icons
-import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons'
+import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons-react'
 import LlamaindexPNG from '@/assets/images/llamaindex.png'
 import LangChainPNG from '@/assets/images/langchain.png'
 

packages/ui/src/views/canvas/CanvasHeader.jsx

@@ -8,7 +8,7 @@ import { useTheme } from '@mui/material/styles'
 import { Avatar, Box, ButtonBase, Typography, Stack, TextField } from '@mui/material'
 
 // icons
-import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck, IconX, IconCode } from '@tabler/icons'
+import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck, IconX, IconCode } from '@tabler/icons-react'
 
 // project imports
 import Settings from '@/views/settings'

packages/ui/src/views/canvas/CanvasNode.jsx

@@ -17,7 +17,7 @@ import NodeInfoDialog from '@/ui-component/dialog/NodeInfoDialog'
 
 // const
 import { baseURL } from '@/store/constant'
-import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons'
+import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons-react'
 import { flowContext } from '@/store/context/ReactFlowContext'
 import LlamaindexPNG from '@/assets/images/llamaindex.png'
 

packages/ui/src/views/canvas/CredentialInputHandler.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 
 // material-ui
 import { IconButton } from '@mui/material'
-import { IconEdit } from '@tabler/icons'
+import { IconEdit } from '@tabler/icons-react'
 
 // project import
 import { AsyncDropdown } from '@/ui-component/dropdown/AsyncDropdown'

packages/ui/src/views/canvas/NodeInputHandler.jsx

@@ -8,7 +8,7 @@ import { useTheme, styled } from '@mui/material/styles'
 import { Box, Typography, Tooltip, IconButton, Button } from '@mui/material'
 import IconAutoFixHigh from '@mui/icons-material/AutoFixHigh'
 import { tooltipClasses } from '@mui/material/Tooltip'
-import { IconArrowsMaximize, IconEdit, IconAlertTriangle } from '@tabler/icons'
+import { IconArrowsMaximize, IconEdit, IconAlertTriangle } from '@tabler/icons-react'
 
 // project import
 import { Dropdown } from '@/ui-component/dropdown/Dropdown'

packages/ui/src/views/canvas/StickyNote.jsx

@@ -9,7 +9,7 @@ import { useTheme } from '@mui/material/styles'
 import NodeCardWrapper from '@/ui-component/cards/NodeCardWrapper'
 import NodeTooltip from '@/ui-component/tooltip/NodeTooltip'
 import { IconButton, Box } from '@mui/material'
-import { IconCopy, IconTrash } from '@tabler/icons'
+import { IconCopy, IconTrash } from '@tabler/icons-react'
 import { Input } from '@/ui-component/input/Input'
 
 // const

packages/ui/src/views/canvas/index.jsx

@@ -38,7 +38,7 @@ import useApi from '@/hooks/useApi'
 import useConfirm from '@/hooks/useConfirm'
 
 // icons
-import { IconX, IconRefreshAlert } from '@tabler/icons'
+import { IconX, IconRefreshAlert } from '@tabler/icons-react'
 
 // utils
 import {

packages/ui/src/views/chatflows/APICodeDialog.jsx

@@ -35,7 +35,7 @@ import cURLSVG from '@/assets/images/cURL.svg'
 import EmbedSVG from '@/assets/images/embed.svg'
 import ShareChatbotSVG from '@/assets/images/sharing.png'
 import settingsSVG from '@/assets/images/settings.svg'
-import { IconBulb } from '@tabler/icons'
+import { IconBulb } from '@tabler/icons-react'
 
 // API
 import apiKeyApi from '@/api/apikey'

packages/ui/src/views/chatflows/ShareChatbot.jsx

@@ -12,7 +12,7 @@ import { StyledButton } from '@/ui-component/button/StyledButton'
 import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
 
 // Icons
-import { IconX, IconCopy, IconArrowUpRightCircle } from '@tabler/icons'
+import { IconX, IconCopy, IconArrowUpRightCircle } from '@tabler/icons-react'
 
 // API
 import chatflowsApi from '@/api/chatflows'

packages/ui/src/views/chatflows/index.jsx

@@ -27,7 +27,7 @@ import useApi from '@/hooks/useApi'
 import { baseURL } from '@/store/constant'
 
 // icons
-import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons'
+import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons-react'
 
 // ==============================|| CHATFLOWS ||============================== //
 

packages/ui/src/views/chatmessage/ChatExpandDialog.jsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'
 import { Dialog, DialogContent, DialogTitle, Button } from '@mui/material'
 import { ChatMessage } from './ChatMessage'
 import { StyledButton } from '@/ui-component/button/StyledButton'
-import { IconEraser } from '@tabler/icons'
+import { IconEraser } from '@tabler/icons-react'
 
 const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel, previews, setPreviews }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/views/chatmessage/ChatMessage.jsx

@@ -23,7 +23,7 @@ import {
     Typography
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconCircleDot, IconDownload, IconSend, IconMicrophone, IconPhotoPlus, IconTrash, IconX, IconTool } from '@tabler/icons'
+import { IconCircleDot, IconDownload, IconSend, IconMicrophone, IconPhotoPlus, IconTrash, IconX, IconTool } from '@tabler/icons-react'
 import robotPNG from '@/assets/images/robot.png'
 import userPNG from '@/assets/images/account.png'
 import audioUploadSVG from '@/assets/images/wave-sound.jpg'

packages/ui/src/views/chatmessage/ChatPopUp.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import { ClickAwayListener, Paper, Popper, Button } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconMessage, IconX, IconEraser, IconArrowsMaximize } from '@tabler/icons'
+import { IconMessage, IconX, IconEraser, IconArrowsMaximize } from '@tabler/icons-react'
 
 // project import
 import { StyledFab } from '@/ui-component/button/StyledFab'