resolve breaking changes from vite-svg plugin upgrade

src/components/Chart/ExpandedChart.tsx

@@ -2,7 +2,7 @@ import { Grid, Link, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/m
 import { Modal, Tooltip } from "@olympusdao/component-library";
 import React, { useEffect } from "react";
 import { ResponsiveContainer } from "recharts";
-import { ReactComponent as GraphLogo } from "src/assets/icons/graph-grt-logo.svg";
+import GraphLogo from "src/assets/icons/graph-grt-logo.svg?react";
 
 const ExpandedChart = ({
   open,

src/components/ConnectButton/ConnectButton.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
 import { Icon, OHMButtonProps, PrimaryButton } from "@olympusdao/component-library";
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
-import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
+import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { trackGAEvent } from "src/helpers/analytics/trackGAEvent";
 
 const fireAnalyticsEvent = () => {

src/components/Sidebar/NavContent.tsx

@@ -3,8 +3,8 @@ import { styled } from "@mui/material/styles";
 import { Icon } from "@olympusdao/component-library";
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
-import { ReactComponent as OlympusIcon } from "src/assets/icons/olympus-nav-header.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
+import OlympusIcon from "src/assets/icons/olympus-nav-header.svg?react";
 import NavItem from "src/components/library/NavItem";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";

src/components/TopBar/TopBar.tsx

@@ -1,7 +1,7 @@
 // import "src/components/TopBar/TopBar.scss";
 
 import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
-import { ReactComponent as MenuIcon } from "src/assets/icons/hamburger.svg";
+import MenuIcon from "src/assets/icons/hamburger.svg?react";
 import ConnectButton from "src/components/ConnectButton/ConnectButton";
 import ThemeSwitcher from "src/components/TopBar/ThemeSwitch";
 

src/views/Bond/components/BondList.tsx

@@ -12,7 +12,7 @@ import {
 } from "@mui/material";
 import { TertiaryButton, TokenStack } from "@olympusdao/component-library";
 import { NavLink } from "react-router-dom";
-import { ReactComponent as ArrowUp } from "src/assets/icons/arrow-up.svg";
+import ArrowUp from "src/assets/icons/arrow-up.svg?react";
 import { sortByDiscount } from "src/helpers/bonds/sortByDiscount";
 import { Token } from "src/helpers/contracts/Token";
 import { useScreenSize } from "src/hooks/useScreenSize";

src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx

@@ -2,7 +2,7 @@ import { Box, Divider, SvgIcon } from "@mui/material";
 import { Modal, OHMSwapCardProps, PrimaryButton, SwapCard, SwapCollection } from "@olympusdao/component-library";
 import { BigNumber, ethers } from "ethers";
 import { useState } from "react";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatNumber } from "src/helpers";
@@ -253,11 +253,11 @@ export const CreateOrRepayLoan = ({
                     ? Number(paymentAmount) > Number(loanPayable)
                       ? `Payback Amount exceeds Loan`
                       : Number(paymentAmount.toString()) > Number(maxYouCanBorrow)
-                      ? `Insufficient Funds for Repayment`
-                      : `Repay Loan`
+                        ? `Insufficient Funds for Repayment`
+                        : `Repay Loan`
                     : Number(paymentAmount.toString()) > maxYouCanBorrow
-                    ? `Amount requested exceeds capacity`
-                    : `Borrow DAI & Open Position`}
+                      ? `Amount requested exceeds capacity`
+                      : `Borrow DAI & Open Position`}
                 </PrimaryButton>
               </TokenAllowanceGuard>
             )}

src/views/Lending/Cooler/positions/DelegateVoting.tsx

@@ -2,7 +2,7 @@ import { Box, Link, SvgIcon } from "@mui/material";
 import { Input, Modal, PrimaryButton } from "@olympusdao/component-library";
 import { ethers } from "ethers";
 import { useState } from "react";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { useDelegateVoting } from "src/views/Lending/Cooler/hooks/useDelegateVoting";
 import { useNetwork } from "wagmi";

src/views/Lending/Cooler/positions/ExtendLoan.tsx

@@ -2,7 +2,7 @@ import { Box, Skeleton, SvgIcon, Typography } from "@mui/material";
 import { Icon, Input, Metric, Modal, PrimaryButton } from "@olympusdao/component-library";
 import { BigNumber, ethers } from "ethers";
 import { useMemo, useState } from "react";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { formatNumber } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";

src/views/MyBalances/MyCoolerLoans.tsx

@@ -2,7 +2,7 @@ import { Box, Divider, LinearProgress, Link, SvgIcon, Typography, useTheme } fro
 import { Token } from "@olympusdao/component-library";
 import { ethers } from "ethers";
 import { Link as RouterLink } from "react-router-dom";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { formatCurrency } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useCurrentIndex } from "src/hooks/useCurrentIndex";

src/views/MyBalances/MyGohmBalances.tsx

@@ -1,7 +1,7 @@
 import { Box, Divider, Link, SvgIcon, Typography, useTheme } from "@mui/material";
 import { PrimaryButton, SecondaryButton, TextButton, Token } from "@olympusdao/component-library";
 import { Link as RouterLink } from "react-router-dom";
-import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
+import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { formatCurrency } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useGohmBalance } from "src/hooks/useBalance";

src/views/MyBalances/MyOhmBalances.tsx

@@ -2,7 +2,7 @@ import { Box, Divider, Link, SvgIcon, Typography } from "@mui/material";
 import { PrimaryButton, SecondaryButton, TextButton, Token } from "@olympusdao/component-library";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
+import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { MigrationNotification } from "src/components/MigrationNotification";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useOhmBalance, useSohmBalance, useV1OhmBalance, useV1SohmBalance } from "src/hooks/useBalance";

src/views/TreasuryDashboard/components/Graph/ChartCard.tsx

@@ -1,8 +1,8 @@
 import { Grid, Link, Skeleton, SvgIcon, Typography } from "@mui/material";
 import { InfoTooltip, Tooltip } from "@olympusdao/component-library";
 import { ReactElement } from "react";
-import { ReactComponent as Fullscreen } from "src/assets/icons/fullscreen.svg";
-import { ReactComponent as GraphLogo } from "src/assets/icons/graph-grt-logo.svg";
+import Fullscreen from "src/assets/icons/fullscreen.svg?react";
+import GraphLogo from "src/assets/icons/graph-grt-logo.svg?react";
 
 type ChartCardProps = {
   headerText: string;