By default, Nuxt uses url-loader to base64-encode and inline any images that are smaller than 1kb:

https://nuxtjs.org/docs/2.x/directory-structure/assets/#webpack

Here's the relevant part of the default Nuxt config:

https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L383

I want to disable this base64 inlining for SVGs.

Here is how SVGs are included in my template:

    <img
      :src="require(`@/assets/images/${src}`)"
    />

Here's my attempt in my own Nuxt config:

export default {
  build: {
    extend(config, { isDev }) {
      config.module.rules = [
        {
          test: /\.svg$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: false,
              name: '[path][name].[ext]',
            },
          }],
        },
        ...config.module.rules,
      ];
    },
  },
}

This causes images to not render on my development server:

There are no build errors. What is the correct way to disable the inlining of SVGs?

Edit:

Not having gotten any responses, I ended up using this horrible method to loop through all existing rules and explicitly remove svg from them:

export default {
  build: {
    extend(config, { isDev }) {
      config.module.rules = config.module.rules.map(rule => {
        if (rule.test && rule.test.toString().indexOf('svg') > -1) {
          const regex = rule.test;
          rule.test = new RegExp(regex.source.replace('|svg', ''), regex.flags);
        }
        return rule;
      });

      config.module.rules = [
        {
          test: /\.svg$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: false,
              name: '[path][name].[ext]',
            },
          }],
        },
        ...config.module.rules,
      ];
    },
  },
}