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 +```