From bcf60b4e1aa2283821010715b33009d8f4a48207 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 28 Mar 2022 12:57:20 +1100
Subject: Convert SVG icons into icon components

---
 src/App.vue                          | 85 ++++++++----------------------------
 src/components/HelpModal.vue         |  9 ++--
 src/components/SearchModal.vue       |  9 ++--
 src/components/SettingsPane.vue      |  9 ++--
 src/components/TileImg.vue           |  8 ++--
 src/components/TileInfoModal.vue     | 10 ++---
 src/components/icon/CloseIcon.vue    | 12 +++++
 src/components/icon/HelpIcon.vue     | 13 ++++++
 src/components/icon/InfoIcon.vue     | 13 ++++++
 src/components/icon/PlayIcon.vue     | 13 ++++++
 src/components/icon/SearchIcon.vue   | 12 +++++
 src/components/icon/SettingsIcon.vue | 22 ++++++++++
 12 files changed, 127 insertions(+), 88 deletions(-)
 create mode 100644 src/components/icon/CloseIcon.vue
 create mode 100644 src/components/icon/HelpIcon.vue
 create mode 100644 src/components/icon/InfoIcon.vue
 create mode 100644 src/components/icon/PlayIcon.vue
 create mode 100644 src/components/icon/SearchIcon.vue
 create mode 100644 src/components/icon/SettingsIcon.vue

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 541e630..6f9c77c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,18 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+//
 import Tile from './components/Tile.vue';
 import AncestryBar from './components/AncestryBar.vue';
 import TileInfoModal from './components/TileInfoModal.vue';
 import SearchModal from './components/SearchModal.vue';
 import HelpModal from './components/HelpModal.vue';
 import SettingsPane from './components/SettingsPane.vue';
+//
+import SearchIcon from './components/icon/SearchIcon.vue';
+import PlayIcon from './components/icon/PlayIcon.vue';
+import HelpIcon from './components/icon/HelpIcon.vue';
+import SettingsIcon from './components/icon/SettingsIcon.vue';
+//
 import {TolNode, TolNodeRaw, tolFromRaw, getTolMap} from './tol';
 import {LayoutNode, initLayoutTree, initLayoutMap, tryLayout} from './layout';
 import type {LayoutOptions} from './layout';
@@ -468,7 +475,10 @@ export default defineComponent({
 		window.removeEventListener('resize', this.onResize);
 		window.removeEventListener('keyup', this.onKeyUp);
 	},
-	components: {Tile, AncestryBar, TileInfoModal, SettingsPane, SearchModal, HelpModal, },
+	components: {
+		Tile, AncestryBar, TileInfoModal, SettingsPane, SearchModal, HelpModal,
+		SearchIcon, PlayIcon, HelpIcon, SettingsIcon,
+	},
 });
 </script>
 
@@ -483,18 +493,12 @@ export default defineComponent({
 		:pos="[0,0]" :dims="ancestryBarDims" :nodes="detachedAncestors" :options="componentOptions"
 		@detached-ancestor-clicked="onDetachedAncestorClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
 	<!-- Icons -->
-	<svg class="absolute top-[6px] right-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
-		@click="onSearchIconClick">
-		<use href="#svg-search"/>
-	</svg>
-	<svg class="absolute top-[6px] right-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
-		@click="onPlayIconClick">
-		<use href="#svg-play"/>
-	</svg>
-	<svg class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"
-		@click="onHelpIconClick">
-		<use href="#svg-help"/>
-	</svg>
+	<search-icon @click="onSearchIconClick"
+		class="absolute top-[6px] right-[54px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+	<play-icon @click="onPlayIconClick"
+		class="absolute top-[6px] right-[30px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+	<help-icon @click="onHelpIconClick"
+		class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
 	<!-- Modals -->
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions"
@@ -515,66 +519,13 @@ export default defineComponent({
 		<div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px] invisible">
 			<div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45
 				bg-black text-white hover:cursor-pointer" @click="onSettingsIconClick">
-				<svg class="w-6 h-6 mx-auto mt-2"><use href="#svg-settings"/></svg>
+				<settings-icon class="w-6 h-6 mx-auto mt-2"/>
 			</div>
 		</div>
 	</transition>
 	<!-- Overlay used to prevent interaction and capture clicks -->
 	<div :style="{visibility: animationActive ? 'visible' : 'hidden'}"
 		class="absolute left-0 top-0 w-full h-full" @click="onOverlayClick"></div>
-	<!-- SVGs reference-able from elsewhere -->
-	<svg style="display:none">
-		<defs>
-			<svg id="svg-info"
-				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<circle cx="12" cy="12" r="10"/>
-				<line x1="12" y1="16" x2="12" y2="12"/>
-				<line x1="12" y1="8" x2="12.01" y2="8"/>
-			</svg>
-			<svg id="svg-settings"
-				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<circle cx="12" cy="12" r="3"/>
-				<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0
-					0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2
-					2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0
-					0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65
-					1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1
-					2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2
-					0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65
-					1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0
-					1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
-					2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2
-					2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-			</svg>
-			<svg id="svg-search"
-				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<circle cx="11" cy="11" r="8"/>
-				<line x1="21" y1="21" x2="16.65" y2="16.65"/>
-			</svg>
-			<svg id="svg-play"
-				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<circle cx="12" cy="12" r="10"/>
-				<polygon points="10 8 16 12 10 16 10 8"/>
-			</svg>
-			<svg id="svg-help"
-				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<circle cx="12" cy="12" r="10"/>
-				<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
-				<line x1="12" y1="17" x2="12.01" y2="17"/>
-			</svg>
-			<svg id="svg-close"
-				xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<line x1="18" y1="6" x2="6" y2="18"/>
-				<line x1="6" y1="6" x2="18" y2="18"/>
-			</svg>
-		</defs>
-	</svg>
 </div>
 </template>
 
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index f56807c..8be08f4 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
 
 export default defineComponent({
 	props: {
@@ -7,11 +8,12 @@ export default defineComponent({
 	},
 	methods: {
 		closeClicked(evt: Event){
-			if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){
+			if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
 				this.$emit('help-modal-close');
 			}
 		},
 	},
+	components: {CloseIcon, },
 	emits: ['help-modal-close'],
 });
 </script>
@@ -20,9 +22,8 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
-		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click.stop="closeClicked" ref="closeIcon">
-			<use href="#svg-close"/>
-		</svg>
+		<close-icon @click.stop="closeClicked" ref="closeIcon"
+			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div class="mb-4">
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 1d9b181..f3bcb3e 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+import SearchIcon from './icon/SearchIcon.vue';
 import {TolNode} from '../tol';
 import {LayoutNode} from '../layout';
 
@@ -11,7 +12,7 @@ export default defineComponent({
 	},
 	methods: {
 		closeClicked(evt: Event){
-			if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
+			if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
 				this.$emit('search-close');
 			}
 		},
@@ -35,6 +36,7 @@ export default defineComponent({
 	mounted(){
 		(this.$refs.searchInput as HTMLInputElement).focus();
 	},
+	components: {SearchIcon, },
 	emits: ['search-node', 'search-close']
 });
 </script>
@@ -45,9 +47,8 @@ export default defineComponent({
 		bg-stone-50 rounded-md shadow shadow-black flex gap-1">
 		<input type="text" class="block border"
 			@keyup.enter="onSearchEnter" @keyup.esc="closeClicked" ref="searchInput"/>
-		<svg class="block w-6 h-6 ml-1 hover:cursor-pointer hover:bg-stone-200" @click.stop="onSearchEnter">
-			<use href="#svg-search"/>
-		</svg>
+		<search-icon @click.stop="onSearchEnter"
+			class="block w-6 h-6 ml-1 hover:cursor-pointer hover:bg-stone-200" />
 	</div>
 </div>
 </template>
diff --git a/src/components/SettingsPane.vue b/src/components/SettingsPane.vue
index d49dd68..2b777e2 100644
--- a/src/components/SettingsPane.vue
+++ b/src/components/SettingsPane.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
 import type {LayoutOptions} from '../layout';
 
 export default defineComponent({
@@ -9,7 +10,7 @@ export default defineComponent({
 	},
 	methods: {
 		closeClicked(evt: Event){
-			if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){
+			if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
 				this.$emit('settings-close');
 			}
 		},
@@ -33,15 +34,15 @@ export default defineComponent({
 			this.onLayoutOptChg();
 		},
 	},
+	components: {CloseIcon, },
 	emits: ['settings-close', 'layout-option-change', ],
 });
 </script>
 
 <template>
 <div class="absolute bottom-4 right-4 min-w-[5cm] p-3 bg-stone-50 visible rounded-md shadow shadow-black">
-	<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click="closeClicked" ref="closeIcon">
-		<use href="#svg-close"/>
-	</svg>
+	<close-icon @click="closeClicked" ref="closeIcon"
+		class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
 	<h1 class="text-xl font-bold mb-2">Settings</h1>
 	<hr class="border-stone-400"/>
 	<div>
diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue
index ebd350d..3de0fa8 100644
--- a/src/components/TileImg.vue
+++ b/src/components/TileImg.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+import InfoIcon from './icon/InfoIcon.vue';
 import {LayoutNode} from '../layout';
 
 export default defineComponent({
@@ -88,6 +89,7 @@ export default defineComponent({
 			this.$emit('info-icon-clicked', this.layoutNode);
 		},
 	},
+	components: {InfoIcon, },
 	emits: ['info-icon-clicked'],
 });
 </script>
@@ -96,10 +98,8 @@ export default defineComponent({
 <div :style="styles" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown"
 	:class="isExpandable ? ['hover:cursor-pointer'] : []">
 	<h1 :style="headerStyles">{{layoutNode.tolNode.name}}</h1>
-	<svg :style="infoIconStyles" class="hover:cursor-pointer"
+	<info-icon :style="infoIconStyles" class="hover:cursor-pointer"
 		@mouseenter="onInfoMouseEnter" @mouseleave="onInfoMouseLeave"
-		@click.stop="onInfoClick" @mousedown.stop @mouseup.stop>
-		<use href="#svg-info"/>
-	</svg>
+		@click.stop="onInfoClick" @mousedown.stop @mouseup.stop/>
 </div>
 </template>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 9d9dd15..f45ef04 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
+import CloseIcon from './icon/CloseIcon.vue';
 import {TolNode} from '../tol';
 
 export default defineComponent({
@@ -20,11 +21,12 @@ export default defineComponent({
 	},
 	methods: {
 		closeClicked(evt: Event){
-			if (evt.target == this.$el || (this.$refs.closeIcon as HTMLElement).contains(evt.target as HTMLElement)){
+			if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
 				this.$emit('info-modal-close');
 			}
 		},
 	},
+	components: {CloseIcon, },
 	emits: ['info-modal-close'],
 });
 </script>
@@ -33,10 +35,8 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
-		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"
-			@click.stop="closeClicked" ref="closeIcon">
-			<use href="#svg-close"/>
-		</svg>
+		<close-icon @click.stop="closeClicked" ref="closeIcon"
+			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div :style="imgStyles" class="float-left mr-4" alt="an image"></div>
diff --git a/src/components/icon/CloseIcon.vue b/src/components/icon/CloseIcon.vue
new file mode 100644
index 0000000..eed0c0f
--- /dev/null
+++ b/src/components/icon/CloseIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<line x1="18" y1="6" x2="6" y2="18"/>
+	<line x1="6" y1="6" x2="18" y2="18"/>
+</svg>
+</template>
diff --git a/src/components/icon/HelpIcon.vue b/src/components/icon/HelpIcon.vue
new file mode 100644
index 0000000..ecd40a0
--- /dev/null
+++ b/src/components/icon/HelpIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="12" cy="12" r="10"/>
+	<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+	<line x1="12" y1="17" x2="12.01" y2="17"/>
+</svg>
+</template>
diff --git a/src/components/icon/InfoIcon.vue b/src/components/icon/InfoIcon.vue
new file mode 100644
index 0000000..0a17ce1
--- /dev/null
+++ b/src/components/icon/InfoIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="12" cy="12" r="10"/>
+	<line x1="12" y1="16" x2="12" y2="12"/>
+	<line x1="12" y1="8" x2="12.01" y2="8"/>
+</svg>
+</template>
diff --git a/src/components/icon/PlayIcon.vue b/src/components/icon/PlayIcon.vue
new file mode 100644
index 0000000..293c827
--- /dev/null
+++ b/src/components/icon/PlayIcon.vue
@@ -0,0 +1,13 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg
+	xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="12" cy="12" r="10"/>
+	<polygon points="10 8 16 12 10 16 10 8"/>
+</svg>
+</template>
diff --git a/src/components/icon/SearchIcon.vue b/src/components/icon/SearchIcon.vue
new file mode 100644
index 0000000..c84c0e4
--- /dev/null
+++ b/src/components/icon/SearchIcon.vue
@@ -0,0 +1,12 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="11" cy="11" r="8"/>
+	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
+</svg>
+</template>
diff --git a/src/components/icon/SettingsIcon.vue b/src/components/icon/SettingsIcon.vue
new file mode 100644
index 0000000..2e6f621
--- /dev/null
+++ b/src/components/icon/SettingsIcon.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="12" cy="12" r="3"/>
+	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0
+		0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2
+		2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0
+		0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65
+		1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1
+		2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2
+		0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65
+		1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0
+		1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
+		2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2
+		2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+</svg>
+</template>
-- 
cgit v1.2.3