Fix TS errors on *.svg import

opsmill · Jan 10, 2025 · f1cacb6 · f1cacb6
1 parent 65dedb2
commit f1cacb6
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 1,378 deletions.
diff --git a/frontend/app/package-lock.json b/frontend/app/package-lock.json
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -53,7 +53,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@svgr/rollup": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.62.3",
     "@tanstack/react-query-devtools": "^5.62.3",
@@ -101,6 +100,7 @@
     "unidiff": "^1.0.4",
     "use-query-params": "^2.2.1",
     "vite": "^5.2.8",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {

diff --git a/frontend/app/src/components/menu/object-details-button.tsx b/frontend/app/src/components/menu/object-details-button.tsx
@@ -6,7 +6,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { QSP } from "@/config/qsp";
-import { ReactComponent as TasksStatusIcon } from "@/images/icons/tasks-status.svg";
+import TasksStatusIcon from "@/images/icons/tasks-status.svg?react";
 import { constructPath } from "@/utils/fetch";
 import { Icon } from "@iconify-icon/react";
 import { Link } from "react-router-dom";

diff --git a/frontend/app/src/pages/login.tsx b/frontend/app/src/pages/login.tsx
@@ -1,5 +1,5 @@
 import { useAuth } from "@/hooks/useAuth";
-import { ReactComponent as InfrahubLogo } from "@/images/Infrahub-SVG-hori.svg";
+import InfrahubLogo from "@/images/Infrahub-SVG-hori.svg?react";
 import { Login } from "@/screens/authentification/login";
 import { Navigate, useLocation } from "react-router-dom";
 
@@ -15,7 +15,7 @@ function LoginPage() {
   return (
     <div className="bg-stone-100 h-screen w-screen py-[25vh] overflow-auto">
       <div className="flex flex-col items-center gap-6 w-full max-w-sm m-auto">
-        <InfrahubLogo className="h-12" alt="Intrahub logo" />
+        <InfrahubLogo className="h-12" />
 
         <h1 className="text-xl font-semibold text-neutral-900">Log in to your account</h1>
 

diff --git a/frontend/app/src/screens/layout/tasks-status.tsx b/frontend/app/src/screens/layout/tasks-status.tsx
@@ -6,7 +6,7 @@ import { TASKS_STATUS_OBJECT } from "@/config/constants";
 import { QSP } from "@/config/qsp";
 import { TASKS_STATUS } from "@/graphql/queries/tasks/getTasksStatus";
 import useQuery from "@/hooks/useQuery";
-import { ReactComponent as TasksStatusIcon } from "@/images/icons/tasks-status.svg";
+import TasksStatusIcon from "@/images/icons/tasks-status.svg?react";
 import { currentBranchAtom } from "@/state/atoms/branches.atom";
 import { constructPath } from "@/utils/fetch";
 import { Icon } from "@iconify-icon/react";

diff --git a/frontend/app/src/screens/proposed-changes/item-info.tsx b/frontend/app/src/screens/proposed-changes/item-info.tsx
@@ -1,8 +1,8 @@
 import { DateDisplay } from "@/components/display/date-display";
 import { Badge } from "@/components/ui/badge";
-import { ReactComponent as PcCheckFailure } from "@/images/icons/proposed-change-checks-failure.svg";
-import { ReactComponent as PcCheckSuccess } from "@/images/icons/proposed-change-checks-success.svg";
-import { ReactComponent as PcCheckUnknown } from "@/images/icons/proposed-change-checks-unknown.svg";
+import PcCheckFailure from "@/images/icons/proposed-change-checks-failure.svg?react";
+import PcCheckSuccess from "@/images/icons/proposed-change-checks-success.svg?react";
+import PcCheckUnknown from "@/images/icons/proposed-change-checks-unknown.svg?react";
 import { Icon } from "@iconify-icon/react";
 
 type ProposedChangesInfoProps = {

diff --git a/frontend/app/src/vite-env.d.ts b/frontend/app/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/frontend/app/vite.config.ts b/frontend/app/vite.config.ts
@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
-import svgr from "@svgr/rollup";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import svgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference types="vite/client" />
		/// <reference types="vite-plugin-svgr/client" />