use new tabler icons package

Author: tudddorrr

package.json

@@ -13,7 +13,7 @@
     "@dinero.js/currencies": "^2.0.0-alpha.11",
     "@hookform/resolvers": "^2.8.8",
     "@sentry/react": "^7.0.0",
-    "@tabler/icons": "^1.104.0",
+    "@tabler/icons-react": "^2.1.2",
     "@tippyjs/react": "^4.2.5",
     "axios": "^1.2.1",
     "classnames": "^2.3.2",

src/components/AlertBanner.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { IconAlertCircle } from '@tabler/icons'
+import { IconAlertCircle } from '@tabler/icons-react'
 import classNames from 'classnames'
 
 const AlertBanner = (props) => {

src/components/Checkbox.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { IconCheck } from '@tabler/icons'
+import { IconCheck } from '@tabler/icons-react'
 import { focusStyle } from '../styles/theme'
 
 export default function Checkbox({ id, checked, onChange, labelContent, inputRef }) {

src/components/ColourfulCheckbox.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { IconCheck } from '@tabler/icons'
+import { IconCheck } from '@tabler/icons-react'
 import { labelFocusStyle } from '../styles/theme'
 
 const ColourfulCheckbox = (props) => {

src/components/ErrorMessage.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { IconAlertCircle } from '@tabler/icons'
+import { IconAlertCircle } from '@tabler/icons-react'
 
 function ErrorMessage({ error, children }) {
   return (

src/components/GameSwitcher.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { IconChevronDown, IconPlus } from '@tabler/icons'
+import { IconChevronDown, IconPlus } from '@tabler/icons-react'
 import Button from './Button'
 import classNames from 'classnames'
 import NewGame from '../modals/NewGame'

src/components/MobileMenu.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { IconArrowLeft } from '@tabler/icons'
+import { IconArrowLeft } from '@tabler/icons-react'
 import Button from './Button'
 import { useLocation } from 'react-router-dom'
 

src/components/Modal.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 import Button from './Button'
 import classNames from 'classnames'
 import usePortal from '../utils/usePortal'

src/components/NavBar.jsx

@@ -6,7 +6,7 @@ import Link from './Link'
 import routes from '../constants/routes'
 import GameSwitcher from './GameSwitcher'
 import activeGameState from '../state/activeGameState'
-import { IconMenu2 } from '@tabler/icons'
+import { IconMenu2 } from '@tabler/icons-react'
 import MobileMenu from './MobileMenu'
 import Button from './Button'
 import ServicesLink from './ServicesLink'

src/components/PlayerAliases.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { IconBrandSteam, IconMail, IconQuestionMark, IconUser } from '@tabler/icons'
+import { IconBrandSteam, IconMail, IconQuestionMark, IconUser } from '@tabler/icons-react'
 import Tippy from '@tippyjs/react'
 import useSortedItems from '../utils/useSortedItems'