NextJS SVG Embed.md

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

1. Install @svg/webpack:

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

2. Add to your webpack config in next.config.js with the following options. This will remove the width and height from the SVG but keep the viewBox for correct scaling.

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                multipass: true,
                plugins: ['removeDimensions'],
              },
            },
          },
        ],
        as: '*.js',
      },
    },
  },
}

3. Import SVG into component

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

4. 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?