Skip to content

Instantly share code, notes, and snippets.

@lukebussey

lukebussey/NextJS 12 & 13 SVG Embed.md

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.
Download ZIP
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:

  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" />
@hooper-hc
Copy link

hooper-hc commented Nov 10, 2022 •
edited
Loading

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 '<'

@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