How to implement a Next.js SVG Loader

Question

since Zeit has a new brand, there are no updates for:

• @zeit/with-css
• @zeit/with-sass

My code was working and now I can't even run my website due to that problem. How can I load SVG differently? I tried using.babelrc but didn't work.

The code next.config.js :

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });
      return config;
    },
  })
);

Answer 1

Since Next.js 9.3 you can use built-in CSS and SASS support.

See Built-in SASS support for more information.

As for svg - you don't need a loader for it.

Assuming you have public/foo.svg image you can specify it in CSS as url(/foo.svg) .