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/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 ++++++++++++++++++++++
 6 files changed, 85 insertions(+)
 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/components/icon')

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