chore(deps): bump vite to v5 (#273)

package.json

@@ -47,10 +47,10 @@
     "@types/react-redux": "^7.1.26",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^4.5.3",
-    "vite-plugin-checker": "^0.6.2",
-    "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.2"
+    "vite": "^5.2.9",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "repository": "https://github.com/bastiendmt/spotify-like-web.git",
   "author": "Bastien DUMONT <[email protected]>",

src/components/Player/Player.tsx

@@ -1,9 +1,9 @@
 import { type ElementRef, useEffect, useRef, useState } from 'react';
-import { ReactComponent as Like } from '../../assets/like.svg';
-import { ReactComponent as Pause } from '../../assets/pause.svg';
-import { ReactComponent as Play } from '../../assets/play.svg';
-import { ReactComponent as Volume } from '../../assets/volume.svg';
-import { ReactComponent as VolumeMuted } from '../../assets/volumeMuted.svg';
+import Like from '../../assets/like.svg?react';
+import Pause from '../../assets/pause.svg?react';
+import Play from '../../assets/play.svg?react';
+import Volume from '../../assets/volume.svg?react';
+import VolumeMuted from '../../assets/volumeMuted.svg?react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import {
   playPause,

src/components/SideBar/SideBar.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { ReactComponent as Logo } from '../../assets/logo.svg';
+import Logo from '../../assets/logo.svg?react';
 import type { PlaylistType } from '../../types/playlist.interface';
 import type { PlaylistsType } from '../../types/playlists.interface';
 import styles from './SideBar.module.scss';

src/pages/PlaylistDetail/PlaylistDetail.tsx

@@ -1,7 +1,7 @@
 import { FastAverageColor } from 'fast-average-color';
 import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { ReactComponent as Time } from '../../assets/time.svg';
+import Time from '../../assets/time.svg?react';
 import Loader from '../../components/Loader/Loader';
 import NotFound from '../../components/NotFound/NotFound';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';

src/pages/PlaylistDetail/SongItem/SongItem.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as Play } from '../../../assets/play.svg';
+import Play from '../../../assets/play.svg?react';
 import type { Track } from '../../../types/track.interface';
 import formatDate from '../../../utils/formatDate';
 import msToMinutesAndSeconds from '../../../utils/msToMinutes';

src/pages/Playlists/PlaylistItem/PlaylistItem.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { ReactComponent as Play } from '../../../assets/play.svg';
+import Play from '../../../assets/play.svg?react';
 import type { PlaylistType } from '../../../types/playlist.interface';
 import styles from './PlaylistItem.module.scss';