Convert SVG icons into icon components

11 files changed, 109 insertions, 21 deletions

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>