Use tabler icons react instead of tabler icons package (#2389)

* Use tabler icons react instead of tabler icons package

* Update package.json

---------

Co-authored-by: Octavian Cioaca <devtools@domselardi.com>

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'