title: How to implement a Next.js SVG Loader
body: <p>since Zeit has a new brand, there are no updates for:</p>
  
  <ul>
  <li>@zeit/with-css</li>
  <li>@zeit/with-sass</li>
  </ul>
  
  <p>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.</p>
  
  <p>The code <strong><em>next.config.js</strong>:</em></p>
  
  <pre><code>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;
      },
    })
  );
  </code></pre>