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" />

Hey! Added SVGR to my project with your config but I am getting this error

error - node_modules/next/dist/client/image.js (159:18) @ Image
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {}

It doesn't work or it gives an error

error - SyntaxError: Unexpected token '<'
/Users/xxxx/node_modules/@universe-design/illustration/illustrations/illustration_admin-empty-negative-no-certified.svg:1
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 23H16a4 4 0 0 0-4 4v59a4 4 0 0 0 4 4h86a4 4 0 0 0 4-4V27a4 4 0 0 0-4-4H78v4a2 2 0 0 1-2 2H42a2 2 0 0 1-2-2v-4Z" fill="#BBBFC4" fill-opacity=".45"/><path d="M40 21a2 2 0 0 1 2-2h34a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H42a2 2 0 0 1-2-2v-6Z" fill="#8F959E"/><path d="M106 36.058c7.702-3.508 8.837-8.966 8.837-10.472V14.088c0 6.524-4.711 10.618-8.837 12.672v9.298Z" fill="#0C296E"/><path d="M114.826 15.204v11.098c0-18.069-33.029-12.563-69.117-14.228V4.236c34.78 1.067 69.117-2.458 69.117 10.968Z" fill="#00D6B9"/><path d="M69.664 103.316V111c-20.479-2.404-48.5.412-55.978-6.785V95.88c7 8.335 35.912 4.698 55.978 7.436Z" fill="#3370FF"/><path d="M3.574 82.685c.613 1.805 1.507 3.463 3.132 4.97 1.683 1.561 4.21 3.014 8.168 4.252 7.832 2.45 21.037 3.988 43.742 4.032v-7.2c-21.144-.03-33.87-1.029-42.023-3.544-4.17-1.286-7.187-2.98-9.534-5.175-1.375-1.287-2.5-2.728-3.485-4.321v6.986Zm-1 .162V71.695c.324.694.655 1.36 1 2.001C9.23 84.2 18.604 87.74 59.616 87.74v9.2l-1-.001C12.845 96.85 5.164 90.706 2.574 82.847Z" fill="#0C296E"/><path d="M11.868 70.982V62.61c-4.564 1.683-9.47 4.963-9.289 10.442l.73 1.918 2.024 2.11c2.067-3.143 4.824-5.635 6.535-6.097Z" fill="#0C296E"/><path d="M63.96 45.395a.5.5 0 0 1 .5-.5h29.996a.5.5 0 1 1 0 1H64.46a.5.5 0 0 1-.5-.5Zm0 12a.5.5 0 0 1 .5-.5h29.996a.5.5 0 1 1 0 1H64.46a.5.5 0 0 1-.5-.5Z" fill="#8F959E"/><path d="M98.031 102c9.941 0 18-8.059 18-18s-8.059-18-18-18c-9.94 0-18 8.059-18 18s8.06 18 18 18Z" fill="#F80"/><path d="M97.213 75.818a.818.818 0 0 0-.819.819v9.818c0 .452.367.818.819.818h1.636a.818.818 0 0 0 .818-.818v-9.819a.818.818 0 0 0-.818-.818h-1.636Zm0 13.092a.818.818 0 0 0-.819.818v1.636c0 .452.367.818.819.818h1.636a.818.818 0 0 0 .818-.818v-1.636a.818.818 0 0 0-.818-.819h-1.636Z" fill="#fff"/><path d="M53.874 43.686a.5.5 0 0 0 .024-.394c-.393-2.65-1.636-5.247-3.744-7.058-2.629-2.263-7.374-4.304-11.881-4.679-4.41-.367-8.792.863-10.6 5.292-3.832.398-6.077 3.433-7.058 6.909-1.008 3.568-.746 7.772.56 10.564.9 1.926 1.811 3.494 2.744 4.837.217.348.44.683.666 1.005a25.687 25.687 0 0 0 4.65 4.995l.18.145.926.385c.45-1.221 2.498-4.89 3.086-5.932.386-.683.797-1.412 1.237-2.222.175-.322.07-.663-.013-.865a4.494 4.494 0 0 0-.404-.715c-.097-.147-.2-.297-.305-.45-.258-.375-.529-.77-.766-1.2-.331-.599-.543-1.18-.526-1.716.015-.503.234-1.034.918-1.558.435-.334.82-.368 1.172-.27.385.108.775.388 1.142.763.36.37.664.796.88 1.135a8.333 8.333 0 0 1 .308.53l.015.03.003.006v.001a.5.5 0 0 0 .702.208l2.33-1.373c1.424-.723 2.56-2.297 3.255-3.932.59-1.386.909-2.923.77-4.17 1.511.029 3.022.043 4.533.044l1.07-.001c1.23-.004 2.459-.017 3.688-.039a.5.5 0 0 0 .438-.275Z" fill="#8F959E"/><path d="m27.326 71.328 2.09-6.026.925.385-2.074 5.979-.005.014-.002.005-2.23 5.663a.5.5 0 0 1-.93-.367l2.226-5.653Zm21.908-25.629A16.488 16.488 0 0 0 48.68 44h1.068c.165.454.314.938.45 1.434a37.07 37.07 0 0 1 .771 3.605 60.048 60.048 0 0 1 .543 4.16l3.374 4.622a.752.752 0 0 1-.452 1.18h-.001l-2.181.454c-.013 2.503-.154 4.823-.87 6.644-.38.97-.93 1.815-1.722 2.472-.793.657-1.8 1.103-3.06 1.32a.614.614 0 0 1-.027.003c-.785.09-1.547.02-2.51-.154l-1.242 5.715 2.307 4.307a.5.5 0 1 1-.881.472l-2.394-4.469a.5.5 0 0 1-.048-.342l1.286-5.917c-1.58-.52-2.946-1.471-4.224-2.76a.5.5 0 1 1 .71-.704c1.301 1.311 2.644 2.198 4.185 2.623l.014.002c1.17.234 1.922.32 2.67.235 1.11-.192 1.942-.576 2.575-1.1.636-.528 1.098-1.22 1.431-2.069.676-1.72.8-4.012.8-6.684a.5.5 0 0 1 .399-.49l2.201-.459-3.23-4.424a.5.5 0 0 1-.094-.253v-.005l-.002-.016-.005-.064-.024-.248a59.008 59.008 0 0 0-.514-3.885 36.048 36.048 0 0 0-.749-3.506Z" fill="#8F959E"/></svg>
^

SyntaxError: Unexpected token '<'

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?