⬆️ Upgrade to @tabler/icons-react

package.json

@@ -42,7 +42,7 @@
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@react-native-async-storage/async-storage": "^1.18.1",
-    "@tabler/icons": "^1.106.0",
+    "@tabler/icons-react": "^2.18.0",
     "@tanstack/query-async-storage-persister": "^4.27.1",
     "@tanstack/query-sync-storage-persister": "^4.27.1",
     "@tanstack/react-query": "^4.2.1",

src/components/Config/LoadConfig.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack, Text, Title, useMantineTheme } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
-import { IconCheck as Check, IconPhoto, IconUpload, IconX, IconX as X } from '@tabler/icons';
+import { IconCheck as Check, IconPhoto, IconUpload, IconX, IconX as X } from '@tabler/icons-react';
 import { setCookie } from 'cookies-next';
 import { useTranslation } from 'next-i18next';
 import { useConfigStore } from '../../config/store';

src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, createStyles, Space } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { useConfigContext } from '../../../../config/provider';
 import { useScreenLargerThan } from '../../../../hooks/useScreenLargerThan';
 import { MobileRibbonSidebarDrawer } from './MobileRibbonSidebarDrawer';

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -26,7 +26,7 @@ import {
   IconVersions,
   IconVocabulary,
   IconWorldWww,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
 import { i18n, Trans, useTranslation } from 'next-i18next';

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -9,7 +9,7 @@ import {
   IconBrush,
   IconClick,
   IconPlug,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';

src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx

@@ -1,6 +1,6 @@
 import { Tabs, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconClick, IconCursorText, IconLink } from '@tabler/icons';
+import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { EditAppModalTab } from '../type';

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx

@@ -12,7 +12,7 @@ import {
   Badge,
   Tooltip,
 } from '@mantine/core';
-import { TablerIcon } from '@tabler/icons';
+import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { AppIntegrationPropertyAccessabilityType } from '../../../../../../../../types/app';
@@ -20,7 +20,7 @@ import { AppIntegrationPropertyAccessabilityType } from '../../../../../../../..
 interface GenericSecretInputProps {
   label: string;
   value: string;
-  setIcon: TablerIcon;
+  setIcon: Icon;
   secretIsPresent: boolean;
   type: AppIntegrationPropertyAccessabilityType;
   onClickUpdateButton: (value: string | undefined) => void;

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconKey } from '@tabler/icons';
+import { IconKey } from '@tabler/icons-react';
 import {
   IntegrationField,
   integrationFieldDefinitions,

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx

@@ -1,6 +1,6 @@
 import { Alert, Divider, Tabs, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconAlertTriangle } from '@tabler/icons';
+import { IconAlertTriangle } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -1,7 +1,7 @@
 import { Group, Space, Stack, Text, UnstyledButton } from '@mantine/core';
 import { closeModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconBox, IconBoxAlignTop, IconStack } from '@tabler/icons';
+import { IconBox, IconBoxAlignTop, IconStack } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core';
-import { TablerIcon } from '@tabler/icons';
+import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import React from 'react';
@@ -9,7 +9,7 @@ interface GenericAvailableElementTypeProps {
   name: string;
   handleAddition: () => Promise<void>;
   description?: string;
-  image: string | TablerIcon;
+  image: string | Icon;
   disabled?: boolean;
 }
 

src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx

@@ -1,5 +1,5 @@
 import { Button, Text } from '@mantine/core';
-import { IconArrowNarrowLeft } from '@tabler/icons';
+import { IconArrowNarrowLeft } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
 interface SelectorBackArrowProps {

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -1,5 +1,5 @@
 import { Grid, Text } from '@mantine/core';
-import { IconCursorText } from '@tabler/icons';
+import { IconCursorText } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
 import { SelectorBackArrow } from '../Shared/SelectorBackArrow';

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -1,6 +1,6 @@
 import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconChecks, TablerIcon } from '@tabler/icons';
+import { IconChecks, Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfigContext } from '../../../../../../config/provider';
@@ -11,7 +11,7 @@ import { GenericAvailableElementType } from '../Shared/GenericElementType';
 
 interface WidgetElementTypeProps {
   id: string;
-  image: string | TablerIcon;
+  image: string | Icon;
   disabled?: boolean;
   widget: IWidgetDefinition;
 }

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Menu } from '@mantine/core';
-import { IconDots, IconLayoutKanban, IconPencil, IconTrash } from '@tabler/icons';
+import { IconDots, IconLayoutKanban, IconPencil, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEditModeStore } from '../Views/useEditModeStore';
 

src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx

@@ -1,6 +1,6 @@
 import { Collapse, Flex, Stack, Text, createStyles } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconChevronDown, IconGripVertical } from '@tabler/icons';
+import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
 import { IDraggableEditableListInputValue } from '../../../../../widgets/widgets';

src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx

@@ -1,6 +1,6 @@
 import { Collapse, createStyles, Flex, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconChevronDown, IconGripVertical } from '@tabler/icons';
+import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, ReactNode, useEffect, useRef } from 'react';
 import { IDraggableListInputValue } from '../../../../../widgets/widgets';

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -15,7 +15,7 @@ import {
   Title,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
-import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons';
+import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';

src/components/Dashboard/Views/ViewToggleButton.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Button, Text, Tooltip } from '@mantine/core';
-import { IconEdit, IconEditOff } from '@tabler/icons';
+import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useScreenLargerThan } from '../../../hooks/useScreenLargerThan';
 import { useEditModeStore } from './useEditModeStore';

src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx

@@ -7,7 +7,7 @@ import {
   IconRowInsertBottom,
   IconEdit,
   IconTrash,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useConfigContext } from '../../../../config/provider';
 import { CategoryType } from '../../../../types/category';
 import { useCategoryActions } from './useCategoryActions';

src/components/IconSelector/DebouncedImage.tsx

@@ -1,6 +1,6 @@
 import { Image, Loader, createStyles } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
-import { IconPhotoOff } from '@tabler/icons';
+import { IconPhotoOff } from '@tabler/icons-react';
 
 interface DebouncedImageProps {
   width: number;

src/components/IconSelector/IconSelector.tsx

@@ -13,7 +13,7 @@ import {
   SelectItemProps,
   ScrollArea,
 } from '@mantine/core';
-import { IconSearch } from '@tabler/icons';
+import { IconSearch } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useGetDashboardIcons } from '../../hooks/icons/useGetDashboardIcons';
 import { humanFileSize } from '../../tools/humanFileSize';

src/components/Settings/Common/CacheButtons.tsx

@@ -0,0 +1,62 @@
+import { Button, Group, MultiSelect, Stack, Title } from '@mantine/core';
+import { useState } from 'react';
+import { notifications } from '@mantine/notifications';
+import { IconTrash } from '@tabler/icons-react';
+import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
+
+const data = [
+  { value: 'ping', label: 'Ping queries' },
+  { value: 'repository-icons', label: 'Remote/Local icons' },
+  { value: 'calendar/medias', label: 'Medais from the Calendar' },
+  { value: 'weather', label: 'Weather data' },
+];
+
+export function CacheButtons() {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <Stack spacing="xs">
+      <Title order={4}>Cache cleaning</Title>
+      <MultiSelect
+        value={value}
+        searchable
+        onChange={setValue}
+        data={data}
+        label="Select the cache(s) to clear"
+      />
+      <Group>
+        <Button
+          color="red"
+          variant="light"
+          onClick={() =>
+            queryClient.invalidateQueries(value).then(() =>
+              notifications.show({
+                title: 'Cache cleared',
+                message: `Cache for ${value.join(', ')} has been cleared`,
+                color: 'teal',
+                icon: <IconTrash />,
+                autoClose: 5000,
+              })
+            )
+          }
+        >
+          Clear selected queries
+        </Button>
+        <Button
+          onClick={() =>
+            queryClient.invalidateQueries().then(() =>
+              notifications.show({
+                title: 'Cache cleared',
+                message: 'All cache has been cleared',
+                color: 'teal',
+                icon: <IconTrash />,
+                autoClose: 5000,
+              })
+            )
+          }
+        >
+          Clear all cache
+        </Button>
+      </Group>
+    </Stack>
+  );
+}

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -10,7 +10,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { openConfirmModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
+import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons-react';
 import fileDownload from 'js-file-download';
 import { Trans, useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -1,5 +1,5 @@
 import { Alert, Paper, SegmentedControl, Space, Stack, TextInput, Title } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons';
+import { IconInfoCircle } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';

src/components/Settings/Customization/CustomizationAccordeon.tsx

@@ -1,5 +1,5 @@
 import { Accordion, Checkbox, Grid, Group, Stack, Text } from '@mantine/core';
-import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons';
+import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
 import { i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { GridstackConfiguration } from './Layout/GridstackConfiguration';

src/components/Settings/Customization/Layout/GridstackConfiguration.tsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Grid, Input, LoadingOverlay, Slider } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { IconCheck, IconReload } from '@tabler/icons';
+import { IconCheck, IconReload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';

src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Button, Tooltip } from '@mantine/core';
 import { openContextModal } from '@mantine/modals';
-import { IconApps } from '@tabler/icons';
+import { IconApps } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useCardStyles } from '../../../useCardStyles';
 

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
 import { useHotkeys, useWindowEvent } from '@mantine/hooks';
 import { hideNotification, showNotification } from '@mantine/notifications';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
+import { IconEditCircle, IconEditCircleOff } from '@tabler/icons-react';
 import axios from 'axios';
 import Consola from 'consola';
 import { getCookie } from 'cookies-next';

src/components/layout/header/Search.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mantine/core';
 import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/icons';
+import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';

src/components/layout/header/SettingsMenu.tsx

@@ -1,6 +1,6 @@
 import { Badge, Button, Menu } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
+import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';
 import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';

src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx

@@ -1,5 +1,5 @@
 import { Menu, useMantineColorScheme } from '@mantine/core';
-import { IconMoonStars, IconSun } from '@tabler/icons';
+import { IconMoonStars, IconSun } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
 export const ColorSchemeSwitch = () => {

src/components/layout/header/SettingsMenu/EditModeToggle.tsx

@@ -2,7 +2,7 @@ import { Button, Code, Menu, PasswordInput, Stack, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { openModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconEdit, IconEditOff } from '@tabler/icons';
+import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import axios from 'axios';
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 

src/modules/Docker/ContainerActionBar.tsx

@@ -9,7 +9,7 @@ import {
   IconRefresh,
   IconRotateClockwise,
   IconTrash,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import axios from 'axios';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';

src/modules/Docker/DockerModule.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { IconBrandDocker, IconX } from '@tabler/icons';
+import { IconBrandDocker, IconX } from '@tabler/icons-react';
 import axios from 'axios';
 import Docker from 'dockerode';
 import { useTranslation } from 'next-i18next';

src/modules/Docker/DockerTable.tsx

@@ -9,7 +9,7 @@ import {
   TextInput,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconSearch } from '@tabler/icons';
+import { IconSearch } from '@tabler/icons-react';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';

src/modules/ModuleTypes.d.ts

@@ -2,14 +2,14 @@
 // Each module should have its own interface and call the following function:
 // TODO: Add a function to register a module
 
-import { TablerIcon } from '@tabler/icons';
+import { Icon } from '@tabler/icons-react';
 
 // Note: Maybe use context to keep track of the modules
 // TODO: Remove this old component and the entire file
 export interface IModule {
   id: string;
   title: string;
-  icon: TablerIcon;
+  icon: Icon;
   component: React.ComponentType;
   options?: Option;
   padding?: PaddingOptions = {

src/modules/common/MediaDisplay.tsx

@@ -1,5 +1,5 @@
 import { Badge, Button, Group, Image, Stack, Text, Title } from '@mantine/core';
-import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons';
+import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '../../config/provider';

src/modules/overseerr/OverseerrModule.tsx

@@ -1,4 +1,4 @@
-import { IconEyeglass } from '@tabler/icons';
+import { IconEyeglass } from '@tabler/icons-react';
 import { OverseerrMediaDisplay } from '../common';
 import { IModule } from '../ModuleTypes';
 

src/modules/overseerr/RequestModal.tsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Checkbox, createStyles, Group, Modal, Stack, Table } from '@mantine/core';
 import { showNotification, updateNotification } from '@mantine/notifications';
-import { IconAlertCircle, IconCheck, IconDownload } from '@tabler/icons';
+import { IconAlertCircle, IconCheck, IconDownload } from '@tabler/icons-react';
 import axios from 'axios';
 import Consola from 'consola';
 import { useTranslation } from 'next-i18next';

src/modules/ping/PingModule.tsx

@@ -1,5 +1,5 @@
 import { Indicator, Tooltip } from '@mantine/core';
-import { IconPlug as Plug } from '@tabler/icons';
+import { IconPlug as Plug } from '@tabler/icons-react';
 import axios, { AxiosResponse } from 'axios';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';

src/pages/login.tsx

@@ -3,7 +3,7 @@ import { PasswordInput, Paper, Title, Text, Container, Button } from '@mantine/c
 import { setCookie } from 'cookies-next';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import axios from 'axios';
-import { IconCheck, IconX } from '@tabler/icons';
+import { IconCheck, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useForm } from '@mantine/form';

src/pages/migrate.tsx

@@ -35,7 +35,7 @@ import {
   IconCircleCheck,
   IconMoonStars,
   IconSun,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import axios from 'axios';
 import { Logo } from '../components/layout/Logo';

src/tools/config/mutations/useCopyConfigMutation.tsx

@@ -1,5 +1,5 @@
 import { showNotification } from '@mantine/notifications';
-import { IconCheck, IconX } from '@tabler/icons';
+import { IconCheck, IconX } from '@tabler/icons-react';
 import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../config/provider';

src/tools/config/mutations/useDeleteConfigMutation.tsx

@@ -1,5 +1,5 @@
 import { showNotification } from '@mantine/notifications';
-import { IconX } from '@tabler/icons';
+import { IconX } from '@tabler/icons-react';
 import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 

src/types/app.ts

@@ -1,4 +1,4 @@
-import { IconKey, IconPassword, IconUser, TablerIcon } from '@tabler/icons';
+import { IconKey, IconPassword, IconUser, Icon } from '@tabler/icons-react';
 
 import { TileBaseType } from './tile';
 
@@ -90,7 +90,7 @@ export const integrationFieldProperties: {
 
 export type IntegrationFieldDefinitionType = {
   type: 'private' | 'public';
-  icon: TablerIcon;
+  icon: Icon;
   label: string;
 };
 

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -21,7 +21,7 @@ import {
   IconPlaylistX,
   IconTrash,
   IconTypography,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { v4 } from 'uuid';

src/widgets/boundary.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { openModal } from '@mantine/modals';
 import { withTranslation } from 'next-i18next';
 import { Button, Card, Center, Code, Group, Stack, Text, Title } from '@mantine/core';
-import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons';
+import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons-react';
 
 type ErrorBoundaryState = {
   hasError: boolean;

src/widgets/calendar/CalendarTile.tsx

@@ -1,6 +1,6 @@
 import { useMantineTheme } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
-import { IconCalendarTime } from '@tabler/icons';
+import { IconCalendarTime } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { i18n } from 'next-i18next';
 import { useState } from 'react';

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -1,5 +1,5 @@
 import { Group, Stack, Text } from '@mantine/core';
-import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { bytes } from '../../tools/bytesHelper';
 

src/widgets/dashDot/DashDotTile.tsx

@@ -1,5 +1,5 @@
 import { Center, createStyles, Grid, Stack, Text, Title } from '@mantine/core';
-import { IconUnlink } from '@tabler/icons';
+import { IconUnlink } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';

src/widgets/date/DateTile.tsx

@@ -1,6 +1,6 @@
 import { Stack, Text, Title } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconClock } from '@tabler/icons';
+import { IconClock } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
 import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';

src/widgets/dnshole/DnsHoleControls.tsx

@@ -1,6 +1,6 @@
 import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons';
+import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
 import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';

src/widgets/dnshole/DnsHoleSummary.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'next-i18next';
 import { Card, Center, Container, Stack, Text } from '@mantine/core';
-import { IconAd, IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from '@tabler/icons';
+import { IconAd, IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';

src/widgets/download-speed/Tile.tsx

@@ -12,7 +12,7 @@ import {
 import { useElementSize, useListState } from '@mantine/hooks';
 import { linearGradientDef } from '@nivo/core';
 import { Serie, Datum, ResponsiveLine } from '@nivo/line';
-import { IconDownload, IconUpload } from '@tabler/icons';
+import { IconDownload, IconUpload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { AppAvatar } from '../../components/AppAvatar';

src/widgets/download-speed/TorrentNetworkTrafficTile.tsx

@@ -1,4 +1,4 @@
-import { IconArrowsUpDown } from '@tabler/icons';
+import { IconArrowsUpDown } from '@tabler/icons-react';
 
 import dynamic from 'next/dynamic';
 import { defineWidget } from '../helper';

src/widgets/iframe/IFrameTile.tsx

@@ -1,5 +1,5 @@
 import { Center, createStyles, Stack, Title, Text, Container } from '@mantine/core';
-import { IconBrowser, IconUnlink } from '@tabler/icons';
+import { IconBrowser, IconUnlink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';

src/widgets/media-requests/MediaRequestListTile.tsx

@@ -1,6 +1,6 @@
 import { Badge, Card, Center, Flex, Group, Image, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { IconGitPullRequest } from '@tabler/icons';
+import { IconGitPullRequest } from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';

src/widgets/media-requests/MediaRequestStatsTile.tsx

@@ -1,5 +1,5 @@
 import { Card, Center, Flex, Stack, Text } from '@mantine/core';
-import { IconChartBar } from '@tabler/icons';
+import { IconChartBar } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';

src/widgets/media-server/DetailCollapseable.tsx

@@ -1,5 +1,5 @@
 import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core';
-import { IconDeviceMobile, IconId } from '@tabler/icons';
+import { IconDeviceMobile, IconId } from '@tabler/icons-react';
 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
 
 export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {

src/widgets/media-server/MediaServerTile.tsx

@@ -9,7 +9,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { IconAlertTriangle, IconMovie } from '@tabler/icons';
+import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { AppAvatar } from '../../components/AppAvatar';
 import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';

src/widgets/media-server/NowPlayingDisplay.tsx

@@ -4,8 +4,8 @@ import {
   IconHeadphones,
   IconQuestionMark,
   IconVideo,
-  TablerIcon,
+  Icon,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
 
@@ -16,7 +16,7 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo })
     return null;
   }
 
-  const Icon = (): TablerIcon => {
+  const Icon = (): Icon => {
     switch (session.currentlyPlaying?.type) {
       case 'audio':
         return IconHeadphones;

src/widgets/rss/RssWidgetTile.tsx

@@ -15,7 +15,7 @@ import {
   Title,
   createStyles,
 } from '@mantine/core';
-import { IconClock, IconRefresh, IconRss } from '@tabler/icons';
+import { IconClock, IconRefresh, IconRss } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';

src/widgets/torrent/TorrentQueueItem.tsx

@@ -22,7 +22,7 @@ import {
   IconPercentage,
   IconSortDescending,
   IconUpload,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { calculateETA } from '../../tools/client/calculateEta';
 import { humanFileSize } from '../../tools/humanFileSize';

src/widgets/torrent/TorrentTile.tsx

@@ -14,7 +14,7 @@ import {
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 
-import { IconFileDownload, IconInfoCircle } from '@tabler/icons';
+import { IconFileDownload, IconInfoCircle } from '@tabler/icons-react';
 
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

src/widgets/useNet/UseNetTile.tsx

@@ -1,5 +1,5 @@
 import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
-import { IconFileDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { IconFileDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
 import { useElementSize } from '@mantine/hooks';

src/widgets/useNet/UsenetHistoryList.tsx

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconAlertCircle } from '@tabler/icons';
+import { IconAlertCircle } from '@tabler/icons-react';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

src/widgets/useNet/UsenetQueueList.tsx

@@ -15,7 +15,7 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

src/widgets/video/VideoStreamTile.tsx

@@ -1,5 +1,5 @@
 import { Center, Group, Stack, Title } from '@mantine/core';
-import { IconDeviceCctv, IconHeartBroken } from '@tabler/icons';
+import { IconDeviceCctv, IconHeartBroken } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { defineWidget } from '../helper';

src/widgets/weather/WeatherIcon.tsx

@@ -8,8 +8,8 @@ import {
   IconQuestionMark,
   IconSnowflake,
   IconSun,
-  TablerIcon,
+  Icon,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
 interface WeatherIconProps {
@@ -36,7 +36,7 @@ export const WeatherIcon = ({ code }: WeatherIconProps) => {
   );
 };
 
-type WeatherDefinitionType = { icon: TablerIcon; name: string; codes: number[] };
+type WeatherDefinitionType = { icon: Icon; name: string; codes: number[] };
 
 // 0 Clear sky
 // 1, 2, 3 Mainly clear, partly cloudy, and overcast

src/widgets/weather/WeatherTile.tsx

@@ -1,6 +1,6 @@
 import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons';
+import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { useWeatherForCity } from './useWeatherForCity';

src/widgets/widgets.ts

@@ -7,7 +7,7 @@ import {
   SwitchProps,
   TextInputProps,
 } from '@mantine/core';
-import { TablerIcon } from '@tabler/icons';
+import { Icon } from '@tabler/icons-react';
 
 import { AreaType } from '../types/area';
 import { ShapeType } from '../types/shape';
@@ -130,7 +130,7 @@ export type IMultipleTextInputOptionValue = {
 // is used to type the widget definitions which will be used to display all widgets
 export type IWidgetDefinition<TKey extends string = string> = {
   id: TKey;
-  icon: TablerIcon | string;
+  icon: Icon | string;
   options: {
     [key: string]: IWidgetOptionValue;
   };

yarn.lock

@@ -1629,18 +1629,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tabler/icons@npm:^1.106.0":
+"@tabler/icons-react@npm:^2.18.0":
-  version: 1.119.0
+  version: 2.18.0
-  resolution: "@tabler/icons@npm:1.119.0"
+  resolution: "@tabler/icons-react@npm:2.18.0"
+  dependencies:
+    "@tabler/icons": 2.18.0
+    prop-types: ^15.7.2
   peerDependencies:
-    react: ^16.x || 17.x || 18.x
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.x || 17.x || 18.x
+  checksum: 9a3d3121811b0e63ce6a4748d0ef306c394b7d7c5ac861e643928f2e3d36b40c7f53981672d6bcdc1245cfb02fc3114360390ed7f4e60e2abb05641f1a12aed9
-  peerDependenciesMeta:
+  languageName: node
-    react:
+  linkType: hard
-      optional: true
+
-    react-dom:
+"@tabler/icons@npm:2.18.0":
-      optional: true
+  version: 2.18.0
-  checksum: ef1ac50c1a47b2205cb86ca43c28d69c7b8f547ad9c2c5545190fc4a455e9767f49cb511a6f9e8dc45b046ee7d2dab3d2c87af4fd5bbb1694832a15698158753
+  resolution: "@tabler/icons@npm:2.18.0"
+  checksum: 2257b5f39c570e3e87d1c6d9cfb2a1b6326600d39c42a077c491f584f9769efc9d9c361df1d3099243774d18cdaa5506075595a3fd626c82e812dd2b43700e34
   languageName: node
   linkType: hard
 
@@ -4940,7 +4944,7 @@ __metadata:
     "@nivo/core": ^0.80.0
     "@nivo/line": ^0.80.0
     "@react-native-async-storage/async-storage": ^1.18.1
-    "@tabler/icons": ^1.106.0
+    "@tabler/icons-react": ^2.18.0
     "@tanstack/query-async-storage-persister": ^4.27.1
     "@tanstack/query-sync-storage-persister": ^4.27.1
     "@tanstack/react-query": ^4.2.1
@@ -6921,7 +6925,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies: