migrate from @tabler/icons to @tabler/icons-react

Components/Repo/QuickCommands/QuickCommands.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { useState } from 'react';
 import classes from './QuickCommands.module.css';
-import { IconSettingsAutomation, IconCopy } from '@tabler/icons';
+import { IconSettingsAutomation, IconCopy } from '@tabler/icons-react';
 
 export default function QuickCommands(props) {
     ////Vars

Components/Repo/Repo.js

@@ -1,7 +1,7 @@
 //Lib
 import React from 'react';
 import classes from './Repo.module.css';
-import { IconSettings, IconInfoCircle } from '@tabler/icons';
+import { IconSettings, IconInfoCircle } from '@tabler/icons-react';
 import timestampConverter from '../../helpers/functions/timestampConverter';
 import StorageBar from '../UI/StorageBar/StorageBar';
 import QuickCommands from './QuickCommands/QuickCommands';

Components/UI/CopyButton/CopyButton.js

@@ -1,7 +1,7 @@
 //Lib
 import classes from './CopyButton.module.css';
 import { useState } from 'react';
-import { IconCopy } from '@tabler/icons';
+import { IconCopy } from '@tabler/icons-react';
 
 export default function CopyButton(props) {
     //State

Components/UI/Layout/Header/Nav/Nav.js

@@ -1,6 +1,6 @@
 //Lib
 import classes from './Nav.module.css';
-import { IconUser, IconLogout } from '@tabler/icons';
+import { IconUser, IconLogout } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useSession, signOut } from 'next-auth/react';

Components/UI/Layout/NavSide/NavSide.js

@@ -4,7 +4,7 @@ import {
     IconServer,
     IconSettingsAutomation,
     IconActivityHeartbeat,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 

Components/WizardSteps/WizardStep1/WizardStep1.js

@@ -1,7 +1,7 @@
 //Lib
 import React from 'react';
 import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconDeviceDesktopAnalytics, IconTerminal2 } from '@tabler/icons';
+import { IconDeviceDesktopAnalytics, IconTerminal2 } from '@tabler/icons-react';
 
 function WizardStep1() {
     return (

Components/WizardSteps/WizardStep2/WizardStep2.js

@@ -1,7 +1,7 @@
 //Lib
 import React from 'react';
 import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconTool, IconAlertCircle } from '@tabler/icons';
+import { IconTool, IconAlertCircle } from '@tabler/icons-react';
 import CopyButton from '../../UI/CopyButton/CopyButton';
 
 function WizardStep2(props) {

Components/WizardSteps/WizardStep3/WizardStep3.js

@@ -1,7 +1,7 @@
 //Lib
 import React from 'react';
 import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconChecks, IconPlayerPlay } from '@tabler/icons';
+import { IconChecks, IconPlayerPlay } from '@tabler/icons-react';
 import CopyButton from '../../UI/CopyButton/CopyButton';
 
 function WizardStep3(props) {

Components/WizardSteps/WizardStep4/WizardStep4.js

@@ -1,7 +1,7 @@
 //Lib
 import React from 'react';
 import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconWand } from '@tabler/icons';
+import { IconWand } from '@tabler/icons-react';
 import CopyButton from '../../UI/CopyButton/CopyButton';
 
 function WizardStep4(props) {

Components/WizardSteps/WizardStepBar/WizardStepBar.js

@@ -1,7 +1,7 @@
 //Lib
 import React from 'react';
 import classes from './WizardStepBar.module.css';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 
 function WizardStepBar(props) {
     ////Functions

Containers/RepoList/RepoList.js

@@ -1,7 +1,7 @@
 //Lib
 import classes from './RepoList.module.css';
 import { useState, useEffect, useRef } from 'react';
-import { IconPlus, IconChevronDown, IconChevronUp } from '@tabler/icons';
+import { IconPlus, IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import useSWR, { useSWRConfig } from 'swr';

Containers/RepoManage/RepoManage.js

@@ -1,6 +1,6 @@
 //Lib
 import classes from './RepoManage.module.css';
-import { IconAlertCircle, IconX } from '@tabler/icons';
+import { IconAlertCircle, IconX } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { toast } from 'react-toastify';
@@ -9,7 +9,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { SpinnerDotted } from 'spinners-react';
 import Select from 'react-select';
 import Link from 'next/link';
-import { IconExternalLink } from '@tabler/icons';
+import { IconExternalLink } from '@tabler/icons-react';
 
 export default function RepoManage(props) {
     ////Var

Containers/UserSettings/AppriseAlertSettings/AppriseAlertSettings.js

@@ -5,7 +5,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import classes from '../UserSettings.module.css';
 import { useState } from 'react';
 import { SpinnerCircularFixed } from 'spinners-react';
-import { IconExternalLink } from '@tabler/icons';
+import { IconExternalLink } from '@tabler/icons-react';
 import Link from 'next/link';
 
 //Components

Containers/UserSettings/EmailAlertSettings/EmailAlertSettings.js

@@ -5,7 +5,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import classes from '../UserSettings.module.css';
 import { useState } from 'react';
 import { SpinnerCircularFixed } from 'spinners-react';
-import { IconExternalLink } from '@tabler/icons';
+import { IconExternalLink } from '@tabler/icons-react';
 import Link from 'next/link';
 
 //Components

package-lock.json

@@ -8,7 +8,7 @@
             "name": "borgwarehouse",
             "version": "1.0",
             "dependencies": {
-                "@tabler/icons": "^2.24.0",
+                "@tabler/icons-react": "^2.24.0",
                 "bcryptjs": "^2.4.3",
                 "chart.js": "^3.9.1",
                 "next": "^13.4.9",
@@ -594,6 +594,22 @@
                 "url": "https://github.com/sponsors/codecalm"
             }
         },
+        "node_modules/@tabler/icons-react": {
+            "version": "2.24.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.24.0.tgz",
+            "integrity": "sha512-0pNc+ffp4HZCsozv9aN/hSDiC/RTGozTmf0MCL4U9NIo8yMQh8q3zEfXRNr18IM2InyIBJL95/1J2kzgU2lYeA==",
+            "dependencies": {
+                "@tabler/icons": "2.24.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/@types/json5": {
             "version": "0.0.29",
             "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",

package.json

@@ -9,7 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@tabler/icons": "^2.24.0",
+        "@tabler/icons-react": "^2.24.0",
         "bcryptjs": "^2.4.3",
         "chart.js": "^3.9.1",
         "next": "^13.4.9",