Add support for ico files

README.md

@@ -108,6 +108,8 @@ npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo sv
 
 :bulb: Depending on your build/deployment setup, it is also possibile to install these as devDependencies. Just make sure that the packages are available when you build your project.
 
+:information_source: Since version 2.5, `ico` files are also optionally supported but need to be enabled in the [`handleImages` config](#handleimages).
+
 ## Usage
 
 You can now import or require your images directly in your react components:
@@ -498,6 +500,9 @@ Please note that an image being handled does not mean it also gets automatically
 
 If an image gets handled but not optimized, it means that the original image will get used and copied for the build.
 
+:information_source: Since version 2.5, `ico` files are also supported but for backwards compatibility, they need to be manually enabled.
+By adding `'ico'` to the `handleImages` array, the plugin will also handle `ico` files.
+
 #### inlineImageLimit
 
 Type: `number`<br>

__tests__/loaders/index.test.js

@@ -38,14 +38,16 @@ describe('next-optimized-images/loaders', () => {
       svg: true,
       webp: true,
       gif: true,
+      ico: false,
     });
 
-    expect(getHandledImageTypes(getConfig({ handleImages: ['jpg', 'png'] }))).toEqual({
+    expect(getHandledImageTypes(getConfig({ handleImages: ['jpg', 'png', 'ico'] }))).toEqual({
       jpeg: true,
       png: true,
       svg: false,
       webp: false,
       gif: false,
+      ico: true,
     });
 
     expect(getHandledImageTypes(getConfig({ handleImages: [] }))).toEqual({
@@ -54,6 +56,7 @@ describe('next-optimized-images/loaders', () => {
       svg: false,
       webp: false,
       gif: false,
+      ico: false,
     });
   });
 

lib/loaders/file-loader.js

@@ -27,6 +27,32 @@ const getFileLoaderOptions = ({
   };
 };
 
+/**
+ * Apply the file loader to the webpack configuration
+ *
+ * @param {object} webpackConfig - webpack configuration
+ * @param {object} nextConfig - next.js configuration
+ * @param {boolean} isServer - if the build is for the server
+ * @param {RegExp} fileRegex - regex for files to handle
+ * @returns {object}
+ */
+const applyFileLoader = (webpackConfig, nextConfig, isServer, fileRegex) => {
+  webpackConfig.module.rules.push({
+    test: fileRegex,
+    oneOf: [
+      {
+        use: {
+          loader: 'file-loader',
+          options: getFileLoaderOptions(nextConfig, isServer),
+        },
+      },
+    ],
+  });
+
+  return webpackConfig;
+};
+
 module.exports = {
   getFileLoaderOptions,
+  applyFileLoader,
 };

lib/loaders/index.js

@@ -1,6 +1,7 @@
 const { applyImgLoader } = require('./img-loader');
 const { applyWebpLoader } = require('./webp-loader');
 const { applyResponsiveLoader } = require('./responsive-loader');
+const { applyFileLoader } = require('./file-loader');
 
 /**
  * Checks if a node module is installed in the current context
@@ -81,6 +82,7 @@ const getHandledImageTypes = (nextConfig) => {
     svg: handleImages.indexOf('svg') >= 0,
     webp: handleImages.indexOf('webp') >= 0,
     gif: handleImages.indexOf('gif') >= 0,
+    ico: handleImages.indexOf('ico') >= 0,
   };
 };
 
@@ -142,6 +144,11 @@ const appendLoaders = (
     config = applyWebpLoader(webpackConfig, nextConfig, false, isServer, detectLoaders);
   }
 
+  // apply file loader for non optimizable image types
+  if (handledImageTypes.ico) {
+    config = applyFileLoader(webpackConfig, nextConfig, isServer, /\.(ico)$/i);
+  }
+
   return config;
 };