You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
classes:undefined// must be specified, e.g 'las la-home'
169
-
url:''// url to the image to be displayed. Alternative to the classes property
168
+
classes:undefined// CSS class to use when icon comes from an icon font, e.g 'las la-home' (one of classes/url/symbol must be specified)
169
+
url:''// url to the image to be displayed. Alternative to the classes/symbol properties.
170
+
symbol:''// url to the svg sprite file + id of icon (eg. /assets/icons.svg#aircraft). Alternative to the classes/url properties.
170
171
color:'black', // any HTML color or [Quasar color](https://quasar.dev/style/color-palette/)
171
172
opacity:1.0, // range from 0.0 (transparent) to 1.0 (opaque)
172
173
size:'14px', // any HTML size
@@ -188,6 +189,27 @@ style: {
188
189
189
190
**KDK** comes with a set of predefined marker shapes: `circle`, `rect`, `rounded-rect`, `diamond`, `triangle`, `triangle-down`, `triangle-left`, `triangle-right`, `star`, `marker-pin`, `square-pin`. But it allows you to register you own shape. See the [Shapes](../core/components.md#shapes) section to understaned how to register a new shape.
190
191
192
+
When using the `point.icon.symbol` property, you must have an svg sprite file somewhere in which you define all your icons. An example of such a sprite file can be the following:
193
+
194
+
```xml
195
+
<?xml version="1.0" encoding="utf-8"?>
196
+
<svgxmlns="http://www.w3.org/2000/svg">
197
+
<defs>
198
+
<!-- icon1 -->
199
+
<symbolid="icon1"viewBox="0 0 24 24">
200
+
<pathd="M19.88 ... "/>
201
+
<pathd="M1.8 ... "/>
202
+
</symbol>
203
+
<!-- icon2 -->
204
+
<symbolid="icon2"viewBox="0 0 24 24">
205
+
<pathd="M88 ... "/>
206
+
</symbol>
207
+
</defs>
208
+
</svg>
209
+
```
210
+
211
+
And in the `point.icon.symbol` you can then reference your icons using `/path/where/to/fetch/file.svg#icon1`.
212
+
191
213
In addition and for backward compatibility, **KDK** supports an enhanced [simple style spec options](https://github.com/mapbox/simplestyle-spec) with the following mapping:
0 commit comments