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()) {