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

Have u any idea how we can give our svg-components autocomplete in vscode? earlyer was tricks but now it dose not work

Fails out of the box, first with

Module not found: Can't resolve 'fs'

And then if not trying to load fs in the browser with

    config.resolve.fallback = {
      ...(config.resolve.fallback || {}),
      fs: false,
    };

fails with

Module not found: Can't resolve 'module'

how to modify the svg's size?

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?