Provide the ability to exclude image imports for only certain file types

[OscarBarrett]

Our use case: We want to use next-images for everything except SVGs. For SVG's we want to use a babel plugin to handle svg imports and include them directly into the rendered output.

Setting exclude to /\.svg$/, works fine however we lose the ability to import SVG's in css/scss files entirely.

At the moment we are adding the following to our webpack config:

config.module.rules.push({
  test: /\.svg$/,
  issuer: /\.scss/,
  use: [{
    loader: require.resolve('url-loader'),
    options: {
      fallback: require.resolve('file-loader'),
      publicPath: `/_next/static/images/`,
      outputPath: `${options.isServer ? "../" : ""}static/images/`,
      name: "[name]-[hash].[ext]"
    }
  }]
});

Which works great, but it would be nice if this was configurable, such as:

imageProcessingRules: [
  {
    extension: 'svg',
    issuer: /\.scss/
  }
]

Where all extensions would be combined into the exclude option for the main rule.

If this is something you'd be happy to include, I can do up a PR.

[arefaslani]

How about adding an option to ignore some extensions?

[OscarBarrett]

So since next 9.3 and this change, next handles images coming from stylesheets and so only an exclude rule is needed to take over svg handling from next-images.

I can't think of another use case for ignoring specific issuers, so I'll mark this as closed. :+1:

[kylemh]

Just a heads-up @OscarBarrett

I've resolved this and I'm sure a new version will release soon giving you the ability to choose the file suffixes that next-images cares about.