Merge branch 'slashmanov/add-support-for-gitlab-icons-in-vite' into 'master'

Add support for GitLab UI icons in Vite

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/159531



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Kev Kloss <kkloss@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Co-authored-by: Stanislav Lashmanov <slashmanov@gitlab.com>

config/helpers/vite_plugin_icons.mjs

+import path from 'node:path';
+import { readdir } from 'node:fs/promises';
+
+const GITLAB_SVG_PATH = '@gitlab/svgs/dist';
+
+export async function IconsPlugin() {
+  return {
+    name: 'vite-plugin-gitlab-icons',
+    async config() {
+      const iconsPath = path.resolve(__dirname, '../..', 'node_modules', GITLAB_SVG_PATH);
+      const files = await readdir(iconsPath, { withFileTypes: true });
+      const alias = files
+        .filter(file => file.isDirectory() || path.extname(file.name) === '.svg')
+        .map((file) => {
+          return {
+            find: file.name,
+            replacement: `${iconsPath}/${file.name}`,
+          }
+        });
+      return {
+        resolve: {
+          alias,
+        }
+      }
+    }
+  };
+}

vite.config.js

@@ -20,6 +20,7 @@ import { AutoStopPlugin } from './config/helpers/vite_plugin_auto_stop.mjs';
 import { PageEntrypointsPlugin } from './config/helpers/vite_plugin_page_entrypoints.mjs';
 import { FixedRubyPlugin } from './config/helpers/vite_plugin_ruby_fixed.mjs';
 import { StylePlugin } from './config/helpers/vite_plugin_style.mjs';
+import { IconsPlugin } from './config/helpers/vite_plugin_icons.mjs';
 /* eslint-enable import/extensions */
 
 let viteGDKConfig;
@@ -84,6 +85,7 @@ export default defineConfig({
   },
   plugins: [
     PageEntrypointsPlugin(),
+    IconsPlugin(),
     StylePlugin({ shouldWatch: viteGDKConfig.hmr !== null }),
     viteTailwindCompilerPlugin({ shouldWatch: viteGDKConfig.hmr !== null }),
     CopyPlugin({