How to work with inline SVG in Blitz.js(Next.js)

nitaking — Sat, 26 Sep 2020 10:23:18 +0000

In Blitz.js, it was taken up by issue that the inline SVG does not work when set up as documented in Blitz.js.

This is an issue with Next.js and is covered in issue here.
Blitz.js is built on top of Next.js and the front end is equivalent to Next.js.
It can be solved with the same response as Next.js

First - Install packages

$ yarn add babel-plugin-inline-react-svg
$ yarn add babel-plugin-module-resolver

Second - Edit babel.config.js

module.exports = {
  presets: ["next/babel"],
  plugins: [
    ["module-resolver", { "root": ["."] }],
    "inline-react-svg",
  ],
}

Now you should be able to view your SVGs!

If you don't know how to do it, I've uploaded the source to Github and you can take a look at it.

https://github.com/nitaking/sample-blitz-svg-setting

Click here for specific commitments.

It shows up like this 🙌

Have a good Blitz.js life!

DEV Community: nitaking

How to work with inline SVG in Blitz.js(Next.js)

First - Install packages

Second - Edit babel.config.js