Grafana UI: Make it possible to bundle package with plugins (#76191)

* moved themecontext to data

* chore(grafana-ui): re-export ThemeContext from grafana/data for backwards compatibility

* Moved icon bundling to core.

* feat(plugins): share react-inlinesvg with plugins for grafana/ui bundling

* chore(codeowners): add generate-icon-bundle.js to file

* chore(storybook): update path to iconBundle file for theme

* feat(plugins): share i18n dependency via systemjs

* Make sure that icon bundle is initialized for tests.

* Removed comment.

* added tests for icon root.

* Removing the need of having an init variable.

* feat(grafana-ui): add icon svgs to bundle for projects that don't rely on grafana

---------

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

scripts/generate-icon-bundle.js

@@ -0,0 +1,51 @@
+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;