refactor: update SVG imports to use new syntax for React components

Author: medyo

src/components/Layout/Header.tsx

@@ -5,9 +5,9 @@ import { CgTab } from 'react-icons/cg'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { ReactComponent as AvatarPlaceholder } from 'src/assets/icons/avatar.svg'
-import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
-import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
+import AvatarPlaceholder from 'src/assets/icons/avatar.svg?react'
+import StreakIcon from 'src/assets/icons/fire_icon.svg?react'
+import HackertabLogo from 'src/assets/logo.svg?react'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
 import { useAuth } from 'src/features/auth'

src/features/settings/components/UserSettings/UserInfo.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
 import { IoCheckmarkOutline } from 'react-icons/io5'
-import { ReactComponent as AvatarPlaceholder } from 'src/assets/icons/avatar.svg'
-import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
+import AvatarPlaceholder from 'src/assets/icons/avatar.svg?react'
+import StreakIcon from 'src/assets/icons/fire_icon.svg?react'
 import { Button, ConfirmModal } from 'src/components/Elements'
 import { useAuth } from 'src/features/auth'
 import { pluralize } from 'src/utils/String'