Webpack: replace file-loader with asset/resource asset module

app/soapbox/features/crypto_donate/utils/coin_icons.js

@@ -1,20 +1,4 @@
-// Does some trickery to import all the icons into the project
-// See: https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack
-
-const icons = {};
-
-function importAll(r) {
-  const pathRegex = /\.\/(.*)\.svg/i;
-
-  r.keys().forEach((key) => {
-    const ticker = pathRegex.exec(key)[1];
-    return icons[ticker] = r(key).default;
-  });
-}
-
-importAll(require.context('cryptocurrency-icons/svg/color/', true, /\.svg$/));
-
-export default icons;
-
 // For getting the icon
-export const getCoinIcon = ticker => icons[ticker] || icons.generic || null;
+export const getCoinIcon = ticker => {
+  return require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`);
+};

webpack/rules/file.js

@@ -1,20 +1,9 @@
-const { join } = require('path');
 const { settings } = require('../configuration');
 
 module.exports = {
   test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
-  use: [
+  type: 'asset/resource',
-    {
+  generator: {
-      loader: 'file-loader',
+    filename: 'packs/media/[contenthash][ext]',
-      options: {
-        name(file) {
-          if (file.includes(settings.source_path)) {
-            return 'packs/media/[path][name]-[contenthash].[ext]';
-          }
-          return 'packs/media/[folder]/[name]-[contenthash:8].[ext]';
   },
-        context: join(settings.source_path),
-      },
-    },
-  ],
 };