NextJS 12 & 13 SVG Embed.md

To embed the contents of an SVG file into your site using NextJS 12 with the new Rust-based compiler, perform the following steps:

1. Install @svg/webpack:

$ npm install --save-dev @svgr/webpack

2. Create a svgr.config.js config file with the following contents. This will remove the width and height from the SVG but keep the viewBox for correct scaling.

module.exports = {
  dimensions: false,
};

4. Add to your webpack config in next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

4. Import SVG into component

import Logo from 'public/images/logo.svg';

5. Use the Component

<Logo className="h-8 w-auto sm:h-10" alt="Site Title" />

works for me!

Insanely laughably hard to do this in Next.js but this is what finally worked for me, cheers!

Hey, it work fine for we but when removing the hight and width for svg with no css overriding those styles it is breaking.
If i keep the dimensions: true, then i can't override the height and width with css.
Any suggestions?