Fix SVGs import syntax

docs/CRA_MIGRATION_GUIDE.md

@@ -213,7 +213,7 @@ export default defineConfig(({ mode }) => {
 CRA allows to transform `.svg` files into React components.
 
 ```tsx
-import { ReactComponent as Logo } from "./logo.svg";
+import { ReactComponent as Logo } from "./logo.svg?react";
 ```
 
 In order to make this work with Vite we will need a [plugin](https://github.com/pd4d10/vite-plugin-svgr)

package.json

@@ -88,7 +88,7 @@
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-env-compatible": "^1.1.1",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-svgr": "^3.2.0",
+    "vite-plugin-svgr": "^4.1.0",
     "vitest": "^0.34.2"
   }
 }

src/App.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Spinner, Text, theme } from "@nordcloud/gnui";
 import { useGNUITheme } from "~/hooks/useGnuiTheme";
 import { Wrapper, Box, buttonCss } from "~/styles";
-import { ReactComponent as Logo } from "./logo.svg";
+import Logo from "./logo.svg?react";
 import "./App.css";
 
 export function App() {

src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /* Copyright (c) 2021 Nordcloud Oy or its affiliates. All Rights Reserved. */
 
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />