Seperate electron and web target building

shared/src/components/svg/keys/svg-text-icon-key/index.ts

@@ -0,0 +1 @@
+export * from './svg-text-icon-key.component';

shared/src/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.html

@@ -0,0 +1,12 @@
+ <svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="textAnchor">
+        <tspan [attr.x]="spanX">{{ text }}</tspan>
+ </svg:text>
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>

shared/src/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'g[svg-text-icon-key]',
+    template: require('./svg-text-icon-key.component.html')
+})
+export class SvgTextIconKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() text: string;
+    @Input() icon: string;
+
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private textAnchor: string;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.useWidth = this.width / 3;
+        this.useHeight = this.height / 3;
+        this.useX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 3;
+        this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 2;
+        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height / 3;
+        this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle';
+        this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
+    }
+}