Skip to content

Instantly share code, notes, and snippets.

@lukebussey
Last active June 10, 2024 09:42
Show Gist options
  • Save lukebussey/8387bb038629dccc01a62487614f44df to your computer and use it in GitHub Desktop.
Save lukebussey/8387bb038629dccc01a62487614f44df to your computer and use it in GitHub Desktop.

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
  1. 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,
};
  1. 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;
  },
};
  1. Import SVG into component
import Logo from 'public/images/logo.svg';
  1. Use the Component
<Logo className="h-8 w-auto sm:h-10" alt="Site Title" />
@jxiaox
Copy link

jxiaox commented Feb 23, 2023

works for me!

@andwrobs
Copy link

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

@shay-alaluf
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment