[web] Use "?component" resourceQuery instead "?url"

This helps to simplify the Jest configuration and to reduce the mocking too.
It's somehow related to the fact that Jest does not fully support resource
queries, see jestjs/jest#6282

Author: dgdavid

web/__mocks__/svg_url.js

@@ -89,8 +89,7 @@ module.exports = {
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   // moduleNameMapper: {},
   moduleNameMapper: {
-    "\\.svg$": "<rootDir>/__mocks__/svg.js",
-    "\\.svg\\?url$": "<rootDir>/__mocks__/svg_url.js",
+    "\\.svg\\?component$": "<rootDir>/__mocks__/svg.js",
     ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/" }),
     "\\.(css|scss)$": "identity-obj-proxy",
   },

web/jest.config.js

@@ -23,30 +23,30 @@ import React from 'react';
 
 // NOTE: "~icons" is an alias to use a shorter path to real icons location.
 //       Check the tsconfig.json file to see its value.
-import Inventory from "~icons/inventory_2.svg";
-import Translate from "~icons/translate.svg";
-import SettingsEthernet from "~icons/settings_ethernet.svg";
-import EditSquare from "~icons/edit_square.svg";
-import Edit from "~icons/edit.svg";
-import HardDrive from "~icons/hard_drive.svg";
-import ManageAccounts from "~icons/manage_accounts.svg";
-import HomeStorage from "~icons/home_storage.svg";
-import Problem from "~icons/problem.svg";
-import Error from "~icons/error.svg";
-import CheckCircle from "~icons/check_circle.svg";
-import TaskAlt from "~icons/task_alt.svg";
-import Downloading from "~icons/downloading.svg";
-import MoreVert from "~icons/more_vert.svg";
-import Wifi from "~icons/wifi.svg";
-import Lan from "~icons/lan.svg";
-import Lock from "~icons/lock.svg";
-import SignalCellularAlt from "~icons/signal_cellular_alt.svg";
-import SettingsFill from "~icons/settings-fill.svg";
-import SettingsApplications from "~icons/settings_applications.svg";
-import Info from "~icons/info.svg";
-import Delete from "~icons/delete.svg";
-import Warning from "~icons/warning.svg";
-import Loading from "./three-dots-loader-icon.svg";
+import Inventory from "~icons/inventory_2.svg?component";
+import Translate from "~icons/translate.svg?component";
+import SettingsEthernet from "~icons/settings_ethernet.svg?component";
+import EditSquare from "~icons/edit_square.svg?component";
+import Edit from "~icons/edit.svg?component";
+import HardDrive from "~icons/hard_drive.svg?component";
+import ManageAccounts from "~icons/manage_accounts.svg?component";
+import HomeStorage from "~icons/home_storage.svg?component";
+import Problem from "~icons/problem.svg?component";
+import Error from "~icons/error.svg?component";
+import CheckCircle from "~icons/check_circle.svg?component";
+import TaskAlt from "~icons/task_alt.svg?component";
+import Downloading from "~icons/downloading.svg?component";
+import MoreVert from "~icons/more_vert.svg?component";
+import Wifi from "~icons/wifi.svg?component";
+import Lan from "~icons/lan.svg?component";
+import Lock from "~icons/lock.svg?component";
+import SignalCellularAlt from "~icons/signal_cellular_alt.svg?component";
+import SettingsFill from "~icons/settings-fill.svg?component";
+import SettingsApplications from "~icons/settings_applications.svg?component";
+import Info from "~icons/info.svg?component";
+import Delete from "~icons/delete.svg?component";
+import Warning from "~icons/warning.svg?component";
+import Loading from "./three-dots-loader-icon.svg?component";
 
 const icons = {
   check_circle: CheckCircle,

web/src/components/layout/Icon.jsx

@@ -22,7 +22,7 @@
 import React from "react";
 
 import "./layout.scss";
-import logoUrl from "@assets/suse-horizontal-logo.svg?url";
+import logoUrl from "@assets/suse-horizontal-logo.svg";
 import { createTeleporter } from "react-teleporter";
 
 const PageTitle = createTeleporter();

web/src/components/layout/Layout.jsx

@@ -132,12 +132,12 @@ module.exports = {
       {
         test: /\.svg$/i,
         type: 'asset',
-        resourceQuery: /url/, // *.svg?url
+        resourceQuery: { not: [/component/] } // exclude file import includes ""?component"
       },
       {
         test: /\.svg$/i,
         issuer: /\.jsx?$/,
-        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+        resourceQuery: /component/, // *.svg?component
         use: ['@svgr/webpack']
       }
     ]