Skip to content

Commit

Permalink
Changed the name of the folder in which custom icons are searched for
Browse files Browse the repository at this point in the history
  • Loading branch information
sronveaux committed Jul 19, 2024
1 parent 0e3e94e commit 6c163cf
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 10 deletions.
4 changes: 2 additions & 2 deletions docs/custom-icons.md
Original file line number Diff line number Diff line change
@@ -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`.
Expand All @@ -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": {
Expand Down
18 changes: 10 additions & 8 deletions src/util/Icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -20,28 +20,30 @@ 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.
* Key is the icon name, value contains the path.
*/
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()) {
Expand Down

0 comments on commit 6c163cf

Please sign in to comment.