added a new component for breadcrumbs and reworked the component for getting icons using sprites

2025-05-15 16:18:39 +05:00
parent f1fd06beb3
commit ace682126e
37 changed files with 6420 additions and 544 deletions
@@ -1,45 +1,47 @@
 <template>
-	<svg v-bind="svgAttributes" v-html="icon.path"></svg>
+  <svg aria-hidden="true">
+    <use :href="symbolId" :fill="color" />
+  </svg>
 </template>

 <script>
-import icons from "@/assets/icons/icons.js"
-export default {
-	name: "BasicIcon",
-	props: {
-		name: {
-			type: String,
-		},
-		viewBox: {
-			type: String,
-		},
-		stroke_width: {
-			type: Number,
-		},
-		fill: {
-			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());
-		}
-	}
-}
+import { defineComponent, computed } from 'vue'
+
+export default defineComponent({
+  name: "BasicIcon",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    prefix: {
+      type: String,
+      default: 'icon',
+    },
+    color: {
+      type: String,
+      default: '#333',
+    },
+  },
+  setup(props) {
+    const rawName = props.name.replace(/^heroicon-(o|c|s|m)-/, '');
+    const symbolId = computed(() => `#${props.prefix}-${rawName}`)
+    return { symbolId }
+  },
+  // 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'
+  // 		};
+  // 	}
+  // },
+})
 </script>