fix: Change next-svg to babel react svg

Signed-off-by: Sangam Kumar <[email protected]>

babel.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   presets: ['next/babel'],
   plugins: [
+    'inline-react-svg',
     [
       'module-resolver',
       {

next.config.js

@@ -1,17 +1,13 @@
-const path = require('path');
-const withPlugins = require('next-compose-plugins');
-const svgr = require('next-svgr');
-
-module.exports = withPlugins([svgr], {
+module.exports = {
   pageExtensions: ['js', 'jsx'],
   i18n: {
     locales: ['en'],
     defaultLocale: 'en',
   },
   sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')],
+    includePaths: ['./src/styles'],
   },
   images: {
     domains: ['avatars.githubusercontent.com'],
   },
-});
+};

package.json

@@ -32,10 +32,8 @@
     "lodash": "4.17.21",
     "luxon": "1.26.0",
     "next": "12.2",
-    "next-compose-plugins": "2.2.1",
     "next-mdx-remote": "4.1",
     "next-seo": "5.5.0",
-    "next-svgr": "0.0.2",
     "postcss": "8.4.16",
     "postcss-preset-env": "6.7.0",
     "react": "17.0",
@@ -47,6 +45,7 @@
   "devDependencies": {
     "@babel/core": "7.18.10",
     "babel-eslint": "10.1.0",
+    "babel-plugin-inline-react-svg": "2.0.1",
     "babel-plugin-module-resolver": "4.1.0",
     "eslint": "8.22.0",
     "eslint-config-next": "12.2.5",

src/components/Hero.js

@@ -66,6 +66,7 @@ export const Hero = () => {
           className="rounded-full shadow-lg h-64 w-64 mb-8 sm:mr-16 sm:mb-0"
           title="Sangam's avatar"
           alt="Sangam's avatar"
+          priority
         />
       </div>
     </section>