fix(svg config): use svg as image when add ?url to the path in the import

.eslintignore

@@ -2,7 +2,7 @@ next.config.js
 tailwind.config.js
 prettier.config.js
 postcss.config.js
-jest.config.mjs
+jest.config.ts
 commitlint.config.js
 .gitignore
 next-env.d.ts

@types/images.d.ts

@@ -15,6 +15,11 @@ declare module '*.svg' {
   export default content;
 }
 
+declare module '*.svg?url' {
+  const content: any;
+  export default content;
+}
+
 declare module '*.jpg' {
   const content: StaticImageData;
   export default content;

jest.config.ts

@@ -23,6 +23,9 @@ const config = {
     '!<rootDir>/src/**/*.d.ts',
     '!**/node_modules/**',
   ],
+  moduleNameMapper: {
+    '\\.svg': '@svgr/webpack',
+  },
   coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
 };

next.config.js

@@ -2,11 +2,21 @@
 const nextConfig = {
   reactStrictMode: true,
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    });
+    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: /url/ },
+        use: ['@svgr/webpack'],
+      },
+    );
+    fileLoaderRule.exclude = /\.svg$/i;
 
     return config;
   },

package-lock.json

@@ -20,8 +20,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwind-merge": "^1.14.0",
-        "tailwindcss": "3.3.3",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss": "3.3.3"
       },
       "devDependencies": {
         "@commitlint/cli": "^17.7.1",
@@ -48,6 +47,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-junit": "^16.0.0",
+        "jest-svg-transformer": "^1.0.0",
         "lint-staged": "^14.0.1",
         "prettier": "^3.0.3",
         "typescript": "^5.2.2"
@@ -10479,6 +10479,16 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/jest-svg-transformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jest-svg-transformer/-/jest-svg-transformer-1.0.0.tgz",
+      "integrity": "sha512-+kD21VthJFHIbI3DZRz+jo4sBOSR1qWEMXhVC28owRMqC5nA+zEiJrHOlj+EqQIztYMouRc1dIjE8SJfFPJUXA==",
+      "dev": true,
+      "peerDependencies": {
+        "jest": ">22",
+        "react": ">=16"
+      }
+    },
     "node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -13685,14 +13695,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/tailwindcss-animate": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
-      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx

 import Image from 'next/image';
 import { ChangeEvent, useState } from 'react';
-import lensIcon from '@/assets/vectors/icons/lens.svg';
+import lensIcon from '@/assets/vectors/icons/lens.svg?url';
 
 export const SearchBar = (): JSX.Element => {
   const [searchValue, setSearchValue] = useState<string>('');