lukebussey/NextJS 12 & 13 SVG Embed.md

## NextJS 12 & 13 SVG Embed.md

      
    Raw
  

              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:

Install @svg/webpack:

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

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,
};

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;
  },
};

Import SVG into component

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

Use the Component

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