From 886bb8d28e992fc6952fbc02f8e23011aed94416 Mon Sep 17 00:00:00 2001
From: sronveaux <s.ronveaux@biodiversity.be>
Date: Fri, 12 Jul 2024 12:24:36 +0200
Subject: [PATCH] Added custom Vuetify icons import functionality

---
 src/main.js      | 16 ++++++++------
 src/util/Icon.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 src/util/Icon.js

diff --git a/src/main.js b/src/main.js
index 11f7ddda..a705229a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,16 +2,17 @@
 // (runtime-only or standalone) has been set in vue.config.js with runtimeCompiler.
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib/framework';
-import PortalVue from 'portal-vue'
-import 'roboto-fontface/css/roboto/roboto-fontface.css'
-import '@mdi/font/css/materialdesignicons.css'
-import 'material-icons/iconfont/material-icons.css'
-import '../node_modules/ol/ol.css';
+import PortalVue from 'portal-vue';
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
+import '@mdi/font/css/materialdesignicons.css';
+import 'material-icons/iconfont/material-icons.css';
+import 'ol/ol.css';
 import WguApp from '../app/WguApp';
 import UrlUtil from './util/Url';
+import IconUtil from './util/Icon';
 import LocaleUtil from './util/Locale';
 import ObjectUtil from './util/Object';
-import ColorThemeUtil from './util/ColorTheme'
+import ColorThemeUtil from './util/ColorTheme';
 import axios from 'axios';
 
 Vue.use(Vuetify);
@@ -50,7 +51,8 @@ const createVuetify = function (appConfig) {
   const preset = {
     theme: ColorThemeUtil.buildTheme(appConfig.colorTheme),
     icons: {
-      iconfont: 'mdiSvg'
+      iconfont: 'mdiSvg',
+      values: IconUtil.importIcons()
     },
     lang: {
       current: LocaleUtil.getPreferredLanguage(appConfig),
diff --git a/src/util/Icon.js b/src/util/Icon.js
new file mode 100644
index 00000000..82869608
--- /dev/null
+++ b/src/util/Icon.js
@@ -0,0 +1,56 @@
+import ObjectUtil from './Object.js';
+
+/**
+ * Icon related utility methods.
+ */
+const IconUtil = {
+
+  /**
+   * Import custom icons from 'app/icons'. Those icons will be included in an
+   * object ready to be injected inside Vuetify configuration options object under
+   * the icons['values'] property.
+   *
+   * @returns {Object} An object containing the imported icons.
+   *                   Key is the icon name, value contains the icon.
+   */
+  importIcons () {
+    const icons = {};
+
+    try {
+      const pathIcons = IconUtil.importPathIcons();
+      ObjectUtil.mergeDeep(icons, pathIcons);
+    } catch (e) {
+    }
+
+    return icons;
+  },
+
+  /**
+   * Import custom icons from 'app/icons/*.js'. Those icons will be included in an
+   * object ready to be injected inside Vuetify configuration options object under
+   * the icons['values'] property.
+   * The icons must be .js files with a default export which contains an SVG path.
+   *
+   * @returns {Object} An object containing icon SVG paths.
+   *                   Key is the icon name, value contains the path.
+   */
+  importPathIcons () {
+    const moduleDefaultExtractor = (i) => i.default;
+    const testExp = /icons\/(?:.+\/)*([a-z0-9_-]+).js$/i;
+
+    const context = require.context(
+      '../../app',
+      true,
+      /icons\/(?:(?:.+)\/)*([a-z0-9_-]+).js$/i
+    );
+    const pathIcons = {};
+    for (const key of context.keys()) {
+      const iconName = key.match(testExp)[1];
+      pathIcons[iconName] = moduleDefaultExtractor(context(key));
+    }
+
+    return pathIcons;
+  }
+}
+
+export default IconUtil;