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/components/HelpModal.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/components/HelpModal.vue')

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">
-- 
cgit v1.2.3