Chore: update react-inlinesvg and use new icon caching mechanism (#97725)

* Update dependency react-inlinesvg to v4

* attempt to use new icon caching

* remove unicons chunk

* fix layout shift

* update snapshot

* parameterise cache by commit hash and clear old caches

* remove icon caching in storybook

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

scripts/generate-icon-bundle.js

@@ -1,51 +0,0 @@
-const fs = require('fs');
-const os = require('os');
-const path = require('path');
-
-const cachedListPath = path.join(__dirname, '../public/app/core/icons/cached.json');
-const iconsList = require(cachedListPath);
-
-const iconsBundleJsTemplatePath = path.join(__dirname, '../public/app/core/icons/iconBundle.ts.template');
-const iconsBundleJsPath = path.join(__dirname, '../public/app/core/icons/iconBundle.ts');
-
-const iconsBundleJsTemplate = fs.readFileSync(iconsBundleJsTemplatePath).toString();
-
-const importsStatements = [];
-const cacheStatements = [];
-
-const grafanaIconsPublicPath = '../../../img/icons/';
-
-function generateIconBundle({ outputPath, verbose = false }) {
-  const modulePrefix = 'u';
-  let moduleNameCount = 1000;
-
-  for (iconEntry of iconsList) {
-    // skip empty and commented
-    if (iconEntry === '' || iconEntry.startsWith('#')) {
-      continue;
-    }
-
-    importsStatements.push(
-      `import ${modulePrefix}${moduleNameCount} from '${grafanaIconsPublicPath}${iconEntry}.svg';`
-    );
-    cacheStatements.push(`  cacheItem(${modulePrefix}${moduleNameCount}, resolvePath('${iconEntry}.svg'));`);
-    moduleNameCount++;
-  }
-  const output = iconsBundleJsTemplate
-    .replace('//{{imports}}', importsStatements.join('\n'))
-    .replace('//{{cacheItems}}', cacheStatements.join('\n'));
-
-  fs.writeFileSync(outputPath, output);
-  if (verbose) {
-    console.log('The iconsBundle file was successfully written.');
-    console.log(`The file is located at ${outputPath}`);
-  }
-  return outputPath;
-}
-
-// if invoked directly
-if (require.main === module) {
-  generateIconBundle({ outputPath: iconsBundleJsPath, verbose: true });
-}
-
-module.exports = generateIconBundle;

scripts/webpack/webpack.common.js

@@ -105,11 +105,6 @@ module.exports = {
         type: 'asset/resource',
         generator: { filename: 'static/img/[name].[hash:8][ext]' },
       },
-      // for pre-caching SVGs as part of the JS bundles
-      {
-        test: /(unicons|mono|custom|solid)[\\/].*\.svg$/,
-        type: 'asset/source',
-      },
       {
         // Required for msagl library (used in Nodegraph panel) to work
         test: /\.m?js$/,
@@ -126,12 +121,6 @@ module.exports = {
       chunks: 'all',
       minChunks: 1,
       cacheGroups: {
-        unicons: {
-          test: /[\\/]node_modules[\\/]@iconscout[\\/]react-unicons[\\/].*[jt]sx?$/,
-          chunks: 'initial',
-          priority: 20,
-          enforce: true,
-        },
         moment: {
           test: /[\\/]node_modules[\\/]moment[\\/].*[jt]sx?$/,
           chunks: 'initial',