From 2b381f284d10cba7df803751eb4fed07618a4b58 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 26 Oct 2022 19:37:32 +0530
Subject: [PATCH] fix: use v-html for svg icons

---
 frappe/public/js/form_builder/components/Field.vue | 10 +++-------
 .../js/form_builder/components/SearchBox.vue       |  4 +---
 .../public/js/form_builder/components/Section.vue  |  4 +---
 frappe/public/js/form_builder/components/Tabs.vue  | 14 +++++---------
 4 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index c90d9accff..56587d44ef 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -67,14 +67,10 @@ watch(
 					class="btn btn-xs btn-icon"
 					@click="edit_html"
 				>
-					<svg class="icon icon-sm">
-						<use href="#icon-edit"></use>
-					</svg>
+					<div v-html="frappe.utils.icon('edit', 'sm')"></div>
 				</button>
 				<button class="btn btn-xs btn-icon" @click="remove_field">
-					<svg class="icon icon-sm">
-						<use href="#icon-close"></use>
-					</svg>
+					<div v-html="frappe.utils.icon('close', 'sm')"></div>
 				</button>
 			</div>
 		</div>
@@ -143,7 +139,7 @@ watch(
 				padding: 2px;
 
 				&:hover {
-					background-color: white;
+					background-color: var(--fg-color);
 				}
 			}
 		}
diff --git a/frappe/public/js/form_builder/components/SearchBox.vue b/frappe/public/js/form_builder/components/SearchBox.vue
index 33e3707205..fe27139755 100644
--- a/frappe/public/js/form_builder/components/SearchBox.vue
+++ b/frappe/public/js/form_builder/components/SearchBox.vue
@@ -9,9 +9,7 @@
 			@input="event => $emit('update:modelValue', event.target.value)"
 		/>
 		<span class="search-icon">
-			<svg class="icon icon-sm">
-				<use href="#icon-search"></use>
-			</svg>
+			<div v-html="frappe.utils.icon('search', 'sm')"></div>
 		</span>
 	</div>
 </template>
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index fbd71fac0f..4a616dde33 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -131,9 +131,7 @@ let section_options = computed(() => {
 							class="btn btn-xs btn-section dropdown-button"
 							data-toggle="dropdown"
 						>
-							<svg class="icon icon-sm">
-								<use href="#icon-dot-horizontal"></use>
-							</svg>
+							<div v-html="frappe.utils.icon('dot-horizontal', 'sm')"></div>
 						</button>
 						<div class="dropdown-menu dropdown-menu-right" role="menu">
 							<button
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index ffda0cbeeb..7d33a7dba9 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -146,13 +146,11 @@ function remove_tab() {
 		<div class="tab-actions" :hidden="store.read_only">
 			<button
 				class="new-tab-btn btn btn-xs"
-				:class="{ 'no-tabs' : !has_tabs }"
+				:class="{ 'no-tabs': !has_tabs }"
 				:title="__('Add new tab')"
-				@click="add_new_tab()"
+				@click="add_new_tab"
 			>
-				<svg class="icon icon-sm" v-if="has_tabs">
-					<use href="#icon-add"></use>
-				</svg>
+				<div v-if="has_tabs" v-html="frappe.utils.icon('add', 'sm')"></div>
 				<div class="add-btn-text" v-else>
 					{{ __("Add new tab") }}
 				</div>
@@ -161,11 +159,9 @@ function remove_tab() {
 				v-if="has_tabs"
 				class="remove-tab-btn btn btn-xs"
 				:title="__('Remove selected tab')"
-				@click="remove_tab()"
+				@click="remove_tab"
 			>
-				<svg class="icon icon-sm">
-					<use href="#icon-close"></use>
-				</svg>
+				<div v-html="frappe.utils.icon('close', 'sm')"></div>
 			</button>
 		</div>
 	</div>