From 886bb8d28e992fc6952fbc02f8e23011aed94416 Mon Sep 17 00:00:00 2001 From: sronveaux Date: Fri, 12 Jul 2024 12:24:36 +0200 Subject: [PATCH 1/3] 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; From 0e3e94e36ae659f6236ecb7d813426366a13e992 Mon Sep 17 00:00:00 2001 From: sronveaux Date: Fri, 12 Jul 2024 12:25:17 +0200 Subject: [PATCH 2/3] Added custom icons documentation --- docs/_sidebar.md | 3 ++- docs/custom-icons.md | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 docs/custom-icons.md diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 3d343bca..4b49ac31 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -8,7 +8,8 @@ - [Map Layers](map-layer-configuration.md) - [Module Configuration](module-configuration.md) - [Reusable Components](reusable-components.md) - - [Language packs](language-packs.md) + - [Language Packs](language-packs.md) + - [Custom Icons](custom-icons.md) - [QGIS2Wegue](qgis_plugin.md) diff --git a/docs/custom-icons.md b/docs/custom-icons.md new file mode 100644 index 00000000..45084d51 --- /dev/null +++ b/docs/custom-icons.md @@ -0,0 +1,34 @@ +# Custom icons + +Wegue allows to inject custom icons inside Vuetify. Each icon to be injected must be defined in a separate file in the `app/icons` folder. + +Those files should be standard `.js` files containing a default export of an `SVG` path definition. The name of the file, without the `.js` extension will be used to reference the icon afterwards. +To use a custom icon inside a component or a configuration file, you have to name it as `$vuetify.icons.myIconName`. + +To integrate nicely inside Vuetify and keep the visual coherence of the whole framework, path coordinates should stay in the [0, 24] range in both horizontal and vertical directions. + +## Example + +Below is an example of an icon file which defines a W letter: + + +```js +export default 'M 23.16738,3.1894921 18.478314,20.810508 H 16.232499 L 12.802077,9.2605987 Q 12.579963,8.5695784 12.382529,7.8538789 12.209775,7.1134999 12.061699,6.5705557 11.938302,6.002932 11.913624,5.780818 11.888911,6.1016475 11.64215,7.1628586 11.395358,8.1993891 11.074526,9.3346366 L 7.7428218,20.810508 H 5.497006 L 0.83261985,3.1894921 H 3.1524731 L 5.8918748,13.949664 q 0.2961515,1.135248 0.4935859,2.196457 0.2221136,1.06121 0.3455113,1.999023 0.1233977,-0.962492 0.3701893,-2.09774 0.2467916,-1.135247 0.5676237,-2.221136 l 3.10959,-10.6367759 h 2.295174 l 3.232988,10.7108139 q 0.345511,1.135247 0.592302,2.270495 0.246792,1.135247 0.37019,1.974343 0.09872,-0.913134 0.320829,-1.974343 0.246792,-1.085889 0.542945,-2.245816 L 20.847525,3.1894921 Z' +``` + +If this icon file is named `app/icons/WLetter.js`, it can used inside a configuration file like this: + +```json + "sample-module": { + "target": "toolbar", + "win": "floating", + "icon": "$vuetify.icons.WLetter" + } +``` + +And to use the same icon inside of a Vue component: + + +```vue + $vuetify.icons.WLetter +``` From 6c163cfe6359dbb5390ab40b4fd49608f90c661a Mon Sep 17 00:00:00 2001 From: sronveaux Date: Fri, 19 Jul 2024 12:01:43 +0200 Subject: [PATCH 3/3] Changed the name of the folder in which custom icons are searched for --- docs/custom-icons.md | 4 ++-- src/util/Icon.js | 18 ++++++++++-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/custom-icons.md b/docs/custom-icons.md index 45084d51..a2488c98 100644 --- a/docs/custom-icons.md +++ b/docs/custom-icons.md @@ -1,6 +1,6 @@ # Custom icons -Wegue allows to inject custom icons inside Vuetify. Each icon to be injected must be defined in a separate file in the `app/icons` folder. +Wegue allows to inject custom icons inside Vuetify. Each icon to be injected must be defined in a separate file in the `app/custom-icons` folder. Those files should be standard `.js` files containing a default export of an `SVG` path definition. The name of the file, without the `.js` extension will be used to reference the icon afterwards. To use a custom icon inside a component or a configuration file, you have to name it as `$vuetify.icons.myIconName`. @@ -16,7 +16,7 @@ Below is an example of an icon file which defines a W letter: export default 'M 23.16738,3.1894921 18.478314,20.810508 H 16.232499 L 12.802077,9.2605987 Q 12.579963,8.5695784 12.382529,7.8538789 12.209775,7.1134999 12.061699,6.5705557 11.938302,6.002932 11.913624,5.780818 11.888911,6.1016475 11.64215,7.1628586 11.395358,8.1993891 11.074526,9.3346366 L 7.7428218,20.810508 H 5.497006 L 0.83261985,3.1894921 H 3.1524731 L 5.8918748,13.949664 q 0.2961515,1.135248 0.4935859,2.196457 0.2221136,1.06121 0.3455113,1.999023 0.1233977,-0.962492 0.3701893,-2.09774 0.2467916,-1.135247 0.5676237,-2.221136 l 3.10959,-10.6367759 h 2.295174 l 3.232988,10.7108139 q 0.345511,1.135247 0.592302,2.270495 0.246792,1.135247 0.37019,1.974343 0.09872,-0.913134 0.320829,-1.974343 0.246792,-1.085889 0.542945,-2.245816 L 20.847525,3.1894921 Z' ``` -If this icon file is named `app/icons/WLetter.js`, it can used inside a configuration file like this: +If this icon file is named `app/custom-icons/WLetter.js`, it can used inside a configuration file like this: ```json "sample-module": { diff --git a/src/util/Icon.js b/src/util/Icon.js index 82869608..b64d4701 100644 --- a/src/util/Icon.js +++ b/src/util/Icon.js @@ -6,9 +6,9 @@ import ObjectUtil from './Object.js'; 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. + * Import custom icons from 'app/custom-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. @@ -20,15 +20,17 @@ const IconUtil = { const pathIcons = IconUtil.importPathIcons(); ObjectUtil.mergeDeep(icons, pathIcons); } catch (e) { + console.warn('An error occured while importing the custom icons, ' + + 'they will not be registered inside Vuetify. The error was: ', 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. + * Import custom icons from 'app/custom-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. @@ -36,12 +38,12 @@ const IconUtil = { */ importPathIcons () { const moduleDefaultExtractor = (i) => i.default; - const testExp = /icons\/(?:.+\/)*([a-z0-9_-]+).js$/i; + const testExp = /custom-icons\/(?:.+\/)*([a-z0-9_-]+).js$/i; const context = require.context( '../../app', true, - /icons\/(?:(?:.+)\/)*([a-z0-9_-]+).js$/i + /custom-icons\/(?:.+\/)*([a-z0-9_-]+).js$/i ); const pathIcons = {}; for (const key of context.keys()) {