Refactor #5046

components/lib/baseicon/BaseIcon.vue

@@ -6,11 +6,6 @@ import { ObjectUtils, UniqueComponentId } from 'primevue/utils';
 export default {
     name: 'BaseIcon',
     extends: BaseComponent,
-    data() {
-        return {
-            id: this.$attrs.id
-        };
-    },
     props: {
         label: {
             type: String,
@@ -22,12 +17,9 @@ export default {
         }
     },
     style: BaseIconStyle,
-    mounted() {
+    computed: {
-        this.id = this.id || UniqueComponentId();
+        pathId() {
-    },
+            return UniqueComponentId('pv_icon_clip_pv_id_');
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
         }
     },
     methods: {
@@ -43,7 +35,6 @@ export default {
                         }
                     ]
                 }),
-                id: this.id,
                 role: !isLabelEmpty ? 'img' : undefined,
                 'aria-label': !isLabelEmpty ? this.label : undefined,
                 'aria-hidden': isLabelEmpty

components/lib/icons/arrowdown/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ArrowDownIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/arrowup/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ArrowUpIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/ban/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'BanIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/exclamationtriangle/index.vue

@@ -27,11 +27,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ExclamationTriangleIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/eyeslash/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'EyeSlashIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/filter/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'FilterIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/filterslash/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'FilterSlashIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/infocircle/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'InfoCircleIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/pencil/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'PencilIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/plus/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'PlusIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/refresh/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'RefreshIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/search/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SearchIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/searchminus/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SearchMinusIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/searchplus/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SearchPlusIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/sortalt/index.vue

@@ -25,11 +25,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SortAltIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/sortamountdown/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SortAmountDownIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/sortamountupalt/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SortAmountUpAltIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/spinner/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'SpinnerIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/star/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'StarIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/starfill/index.vue

@@ -19,11 +19,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'StarFillIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/thlarge/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'ThLargeIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/timescircle/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'TimesCircleIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/trash/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'TrashIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/undo/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'UndoIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/upload/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'UploadIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/windowmaximize/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'WindowMaximizeIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>

components/lib/icons/windowminimize/index.vue

@@ -21,11 +21,6 @@ import BaseIcon from 'primevue/baseicon';
 
 export default {
     name: 'WindowMinimizeIcon',
-    extends: BaseIcon,
+    extends: BaseIcon
-    computed: {
-        pathId() {
-            return `pv_icon_clip_${this.id}`;
-        }
-    }
 };
 </script>