From e202102c9c34bf86fa2684a7818e989fbf730320 Mon Sep 17 00:00:00 2001
From: mateuszmiko <dmastah92@gmail.com>
Date: Mon, 25 Sep 2023 17:46:31 +0200
Subject: [PATCH] fix(svg config): use svg as image when add ?url to the path
 in the import

---
 .eslintignore                                 |  2 +-
 @types/images.d.ts                            |  5 +++++
 jest.config.ts                                |  3 +++
 next.config.js                                | 20 ++++++++++++-----
 package-lock.json                             | 22 ++++++++++---------
 .../TopBar/SearchBar/SearchBar.component.tsx  |  2 +-
 6 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 8d871f88..21cea94c 100644
--- a/.eslintignore
+++ b/.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
diff --git a/@types/images.d.ts b/@types/images.d.ts
index 5d4367be..8d735bfb 100644
--- a/@types/images.d.ts
+++ b/@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;
diff --git a/jest.config.ts b/jest.config.ts
index 7e7dad84..a179ae83 100644
--- a/jest.config.ts
+++ b/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'],
 };
diff --git a/next.config.js b/next.config.js
index 042ec825..44b570e1 100644
--- a/next.config.js
+++ b/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;
   },
diff --git a/package-lock.json b/package-lock.json
index 0e41a874..25de3a12 100644
--- a/package-lock.json
+++ b/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",
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
index 785ec998..104ac2ea 100644
--- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
@@ -1,6 +1,6 @@
 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>('');
-- 
GitLab