added svg loader

components/Sidebar/SidebarContent.js

@@ -4,11 +4,12 @@ import routes from '../../routes/sidebar';
 import Link from 'next/link';
 import SidebarSubmenu from './SidebarSubmenu';
 import { Button } from '@windmill/react-ui';
+import * as Icons from 'icons';
 
-// function Icon({ icon, ...props }) {
-//   const Icon = Icons[icon]
-//   return <Icon {...props} />
-// }
+function Icon({ icon, ...props }) {
+  const Icon = Icons[icon];
+  return <Icon {...props} />;
+}
 
 function SidebarContent() {
   const { asPath } = useRouter();
@@ -35,7 +36,11 @@ function SidebarContent() {
                     ></span>
                   )}
 
-                  {/* <Icon className="w-5 h-5" aria-hidden="true" icon={route.icon} /> */}
+                  <Icon
+                    className='w-5 h-5'
+                    aria-hidden='true'
+                    icon={route.icon}
+                  />
                   <span className='ml-4'>{route.name}</span>
                 </a>
               </Link>

components/Sidebar/SidebarSubmenu.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
-// import { DropdownIcon } from '../../icons';
-// import * as Icons from '../../icons';
+import { DropdownIcon } from 'icons';
+import * as Icons from 'icons';
 import { Transition } from '@windmill/react-ui';
 
 function Icon({ icon, ...props }) {
@@ -24,10 +24,10 @@ function SidebarSubmenu({ route }) {
         aria-haspopup='true'
       >
         <span className='inline-flex items-center'>
-          {/* <Icon className='w-5 h-5' aria-hidden='true' icon={route.icon} /> */}
+          <Icon className='w-5 h-5' aria-hidden='true' icon={route.icon} />
           <span className='ml-4'>{route.name}</span>
         </span>
-        {/* <DropdownIcon className='w-4 h-4' aria-hidden='true' /> */}
+        <DropdownIcon className='w-4 h-4' aria-hidden='true' />
       </button>
       <Transition
         show={isDropdownMenuOpen}

components/Sidebar/index.js

@@ -6,7 +6,7 @@ function Sidebar() {
   return (
     <>
       <DesktopSidebar />
-      {/* <MobileSidebar /> */}
+      <MobileSidebar />
     </>
   );
 }

jsconfig.json

@@ -4,7 +4,8 @@
     "paths": {
       "utils/*": ["./utils/*"],
       "components/*": ["./components/*"],
-      "context/*": ["./context/*"]
+      "context/*": ["./context/*"],
+      "icons/*": ["./icons/*"]
     }
   }
 }

next.config.js

@@ -49,6 +49,16 @@ const nextConfig = {
       },
     ];
   },
+  future: {
+    webpack5: true,
+  },
+  webpack: (config, { isServer }) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack', 'url-loader'],
+    });
+    return config;
+  },
   env,
 };