Link button SVG icon

src/assets/icons/link.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="285.60129pt"
+   height="282pt"
+   viewBox="0 0 285.60129 282"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg8"
+   sodipodi:docname="Link.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="2.625"
+     inkscape:cx="173.86323"
+     inkscape:cy="189.04846"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <metadata
+     id="metadata2">
+Created by potrace 1.10, written by Peter Selinger 2001-2011
+<rdf:RDF>
+  <cc:Work
+     rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+  </cc:Work>
+</rdf:RDF>
+</metadata>
+  <g
+     transform="matrix(0.1,0,0,-0.1,-1.2664294,284)"
+     fill="#000000"
+     stroke="none"
+     id="g6">
+    <path
+       d="m 2268,2793 c -129.3986,-120.4704 -255.0882,-244.2852 -358,-343 -417,-399 -408,-389 -395,-460 8,-41 26,-76 78,-147 20,-29 37,-58 37,-65 0,-12 -96,-106 -451,-445 -87,-83 -109,-95 -138,-69 -41,35 -135,76 -178,76 -44,0 -68,-16 -168,-115 C 684,1214 556,1090 410,951 -7,551 1,560 19,479 40,385 196,196 320,115 428,43 479,20 527,20 c 44,0 68,16 168,115 11,11 139,135 285,275 417,399 408,389 395,460 -8,41 -26,76 -77,147 -21,29 -38,58 -38,65 0,12 96,106 451,446 87,82 109,94 138,68 41,-35 135,-76 178,-76 44,0 68,16 168,115 11,11 133,128 270,260 138,132 283,272 323,312 71.6964,68.4528 78.0389,68.9924 80.6358,139.6662 0.4643,66.1306 -2.7476,64.8883 -21.6358,98.3338 -116,195 -360,395 -484,395 -38,0 -50,-6 -95,-47 z m 203,-162 c 41,-27 97,-73 125,-102 56,-59 124,-152 124,-170 0,-7 -15,-26 -33,-43 -17,-17 -149,-143 -292,-281 -143,-137 -285,-274 -315,-302 -30,-29 -62,-53 -70,-53 -26,0 -80,39 -80,58 0,10 15,33 34,51 19,18 42,51 52,72 22.4241,53.049 -10.0858,98.9814 -27.4286,111.7143 -20.9827,15.4053 -60.0284,30.3762 -94.5714,13.2857 -20,-9 -58,-35 -85,-58 -27,-22 -54,-38 -62,-35 -16,6 -77,92 -77,109 0,6 15,25 33,42 17,17 149,144 292,281 143,138 285,274 315,302 30,29 62,53 71,53 9,0 50,-22 90,-49 z M 919,1166 c 15,-8 33,-22 41,-31 11,-13 9,-20 -12,-43 -68,-73 -77,-130 -30,-175 44,-42 95,-38 156,13 27,23 56,40 64,38 18,-3 80,-86 81,-107 1,-8 -14,-28 -32,-45 C 982.08475,620.14922 811.01466,452.35084 595,247 c -38,-37 -77,-67 -86,-67 -27,0 -160,94 -215,151 -56,59 -124,152 -124,170 0,7 15,26 33,43 211.50606,201.63044 383.23678,373.30695 607,583 60,57 67,60 109,39 z"
+       id="path4"
+       sodipodi:nodetypes="ccccsccsccccsccccsccscccccscccscccsssccccsscccsccccccccccscsccc" />
+  </g>
+</svg>

src/components/map/control/LinkControl.vue

@@ -1,32 +1,23 @@
 <script lang="ts">
-import {defineComponent} from "@vue/runtime-core";
-import L from 'leaflet';
+import {defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
 import {LinkControl} from "@/leaflet/control/LinkControl";
+import DynmapMap from "@/leaflet/DynmapMap";
 
 export default defineComponent({
 	props: {
 		leaflet: {
-			type: Object as () => L.Map,
+			type: Object as () => DynmapMap,
 			required: true,
 		}
 	},
 
-	setup() {
+	setup(props) {
 		const control = new LinkControl({
-				position: 'bottomleft',
-			});
+			position: 'bottomleft',
+		});
 
-		return {
-			control,
-		}
-	},
-
-	mounted() {
-		this.leaflet.addControl(this.control);
-	},
-
-	unmounted() {
-		this.leaflet.removeControl(this.control);
+		onMounted(() => props.leaflet.addControl(control));
+		onUnmounted(() => props.leaflet.removeControl(control));
 	},
 
 	render() {
@@ -34,7 +25,3 @@ export default defineComponent({
 	}
 })
 </script>
-
-<style scoped>
-
-</style>

src/leaflet/control/LinkControl.ts

@@ -1,5 +1,6 @@
 import L, {ControlOptions} from 'leaflet';
 import {useStore} from "@/store";
+import linkIcon from '@/assets/icons/link.svg';
 
 export class LinkControl extends L.Control {
 	// @ts-ignore
@@ -16,6 +17,11 @@ export class LinkControl extends L.Control {
 
 		linkButton.type = 'button';
 		linkButton.title = 'Link';
+		linkButton.innerHTML = `
+		<svg class="svg-icon" viewBox="${linkIcon.viewBox}">
+		  <use xlink:href="${linkIcon.url}" />
+		</svg>`;
+
 		linkButton.addEventListener('click', () => {
 			const projection = useStore().state.currentProjection;
 			console.log(projection.latLngToLocation(this._map!.getCenter(), 64));

src/scss/leaflet/_controls.scss

@@ -57,7 +57,6 @@
 	@extend %button;
 	width: 5rem;
 	height: 5rem;
-	background: $global-background url('../assets/images/link.png') no-repeat center;
 	background-size: 3.2rem 3.2rem;
 }