Changes

resources/js/Components/BaseComponents/BaseBuilderUi/Blocks/Contacts/ContactSectionBlock.vue

@@ -8,7 +8,7 @@
 			</div>
 		</div>
 	</div>
-	<div v-else>
+	<div v-else-if="!loading & contacts">
 		<section class="bg-[#F5F5F5] w-full py-10">
 			<div class="max-w-screen-xl md:flex justify-around w-full mx-auto px-4 md:py-[50px] flex-wrap space-y-7 md:space-y-0">
 							<ContactGroup v-for="contact in contacts.data.content"
@@ -18,6 +18,7 @@
 			</div>
 		</section>
 	</div>
+
 </template>
 
 <script>

resources/js/Components/BaseComponents/BaseIcon.vue

@@ -1,30 +1,12 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg"
-			 :fill="icon.fill || 'none'"
-			 :viewBox="icon.viewBox || this.viewBox || '0 0 24 24'"
-			 :stroke-width="icon.stroke_width || this.stroke_width || 1.5"
-			 :stroke="icon.stroke || 'currentColor'"
-			 :class="$attrs.class || 'w-6 h-6'"
-			 v-html="icon.path"
-	>
-	</svg>
-
-
+	<svg v-bind="svgAttributes" v-html="icon.path"></svg>
 </template>
 
 <script>
-import slugify from "slugify";
 import icons from "@/Components/other/icons.js";
 
 export default {
 	name: "BaseIcon",
-	data() {
-		return {
-			icon: icons[this.name] || icons['file']
-		}
-	},
-	methods: {
-	},
 	props: {
 		name: {
 			type: String,
@@ -39,9 +21,26 @@ export default {
 			type: String
 		}
 	},
+	computed: {
+		icon() {
+			return icons[this.transformIconName(this.name)] || icons['file'];
+		},
+		svgAttributes() {
+			return {
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: this.icon.fill || 'none',
+				viewBox: this.icon.viewBox || this.viewBox || '0 0 24 24',
+				'stroke-width': this.icon.stroke_width || this.stroke_width || 1.5,
+				stroke: this.icon.stroke || 'currentColor',
+				class: this.$attrs.class || 'w-6 h-6'
+			};
+		}
+	},
+	methods: {
+		transformIconName(iconName) {
+			return iconName.replace(/^heroicon-(o|c|s|m)-/, '')
+					.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
+		}
+	}
 }
-</script>
-
-<style scoped>
-
-</style>
+</script>