Bug/display svg url

@types/images.d.ts

@@ -10,12 +10,12 @@ declare module '*.png' {
   export default content;
 }
 
-declare module '*.svg' {
+declare module '*.svg?component' {
   const content: React.FC<React.SVGProps<SVGSVGElement>>;
   export default content;
 }
 
-declare module '*.svg?url' {
+declare module '*.svg' {
   const content: any;
   export default content;
 }

next.config.js

@@ -7,12 +7,12 @@ const nextConfig = {
       {
         ...fileLoaderRule,
         test: /\.svg$/i,
-        resourceQuery: /url/,
+        resourceQuery: { not: /component/ },
       },
       {
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
-        resourceQuery: { not: /url/ },
+        resourceQuery: /component/,
         use: ['@svgr/webpack'],
       },
     );

src/shared/Icon/Icon.component.tsx

-import ChevronRightIcon from '@/assets/vectors/icons/chevron-right.svg';
-import ChevronLeftIcon from '@/assets/vectors/icons/chevron-left.svg';
-import ChevronUpIcon from '@/assets/vectors/icons/chevron-up.svg';
-import ChevronDownIcon from '@/assets/vectors/icons/chevron-down.svg';
-import PlusIcon from '@/assets/vectors/icons/plus.svg';
-import ArrowIcon from '@/assets/vectors/icons/arrow.svg';
-import DotsIcon from '@/assets/vectors/icons/dots.svg';
+import ChevronRightIcon from '@/assets/vectors/icons/chevron-right.svg?component';
+import ChevronLeftIcon from '@/assets/vectors/icons/chevron-left.svg?component';
+import ChevronUpIcon from '@/assets/vectors/icons/chevron-up.svg?component';
+import ChevronDownIcon from '@/assets/vectors/icons/chevron-down.svg?component';
+import PlusIcon from '@/assets/vectors/icons/plus.svg?component';
+import ArrowIcon from '@/assets/vectors/icons/arrow.svg?component';
+import DotsIcon from '@/assets/vectors/icons/dots.svg?component';
 
 type Name =
   | 'chevron-right'