Fixed #3959 - Dynamic clipPath support for icons

primefaces · Jun 5, 2023 · 0da0751 · 0da0751
1 parent cb073ff
commit 0da0751
Show file tree

Hide file tree

Showing 27 changed files with 270 additions and 81 deletions.
diff --git a/components/lib/icons/arrowdown/index.vue b/components/lib/icons/arrowdown/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_326_12468)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_326_12468">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowDownIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/arrowup/index.vue b/components/lib/icons/arrowup/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_326_12509)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_326_12509">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ArrowUpIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/ban/index.vue b/components/lib/icons/ban/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_288_11866)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M7 0C5.61553 0 4.26215 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.00303296 5.6003 -0.13559 7.00776 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0ZM1.16667 7C1.16549 5.65478 1.63303 4.35118 2.48889 3.31333L10.6867 11.5111C9.83309 12.2112 8.79816 12.6544 7.70243 12.789C6.60669 12.9236 5.49527 12.744 4.49764 12.2713C3.50001 11.7986 2.65724 11.0521 2.06751 10.1188C1.47778 9.18558 1.16537 8.10397 1.16667 7ZM11.5111 10.6867L3.31334 2.48889C4.43144 1.57388 5.84966 1.10701 7.29265 1.1789C8.73565 1.2508 10.1004 1.85633 11.1221 2.87795C12.1437 3.89956 12.7492 5.26435 12.8211 6.70735C12.893 8.15034 12.4261 9.56856 11.5111 10.6867Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_288_11866">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'BanIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/exclamationtriangle/index.vue b/components/lib/icons/exclamationtriangle/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_323_12417)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z"
                 fill="currentColor"
@@ -15,17 +15,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_323_12417">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ExclamationTriangleIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/eyeslash/index.vue b/components/lib/icons/eyeslash/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_287_10550)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_287_10550">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'EyeSlashIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/filter/index.vue b/components/lib/icons/filter/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_390_17708)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M8.64708 14H5.35296C5.18981 13.9979 5.03395 13.9321 4.91858 13.8167C4.8032 13.7014 4.73745 13.5455 4.73531 13.3824V7L0.329431 0.98C0.259794 0.889466 0.217389 0.780968 0.20718 0.667208C0.19697 0.553448 0.219379 0.439133 0.271783 0.337647C0.324282 0.236453 0.403423 0.151519 0.500663 0.0920138C0.597903 0.0325088 0.709548 0.000692754 0.823548 0H13.1765C13.2905 0.000692754 13.4021 0.0325088 13.4994 0.0920138C13.5966 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7826 0.780968 13.7402 0.889466 13.6706 0.98L9.26472 7V13.3824C9.26259 13.5455 9.19683 13.7014 9.08146 13.8167C8.96609 13.9321 8.81022 13.9979 8.64708 14ZM5.97061 12.7647H8.02943V6.79412C8.02878 6.66289 8.07229 6.53527 8.15296 6.43177L11.9412 1.23529H2.05884L5.86355 6.43177C5.94422 6.53527 5.98773 6.66289 5.98708 6.79412L5.97061 12.7647Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_390_17708">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/filterslash/index.vue b/components/lib/icons/filterslash/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_408_20963)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_408_20963">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'FilterSlashIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/infocircle/index.vue b/components/lib/icons/infocircle/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_408_21102)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_408_21102">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'InfoCircleIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/pencil/index.vue b/components/lib/icons/pencil/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_20836)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M0.609628 13.959C0.530658 13.9599 0.452305 13.9451 0.379077 13.9156C0.305849 13.8861 0.239191 13.8424 0.18294 13.787C0.118447 13.7234 0.0688234 13.6464 0.0376166 13.5614C0.00640987 13.4765 -0.00560954 13.3857 0.00241768 13.2956L0.25679 10.1501C0.267698 10.0041 0.331934 9.86709 0.437312 9.76516L9.51265 0.705715C10.0183 0.233014 10.6911 -0.0203041 11.3835 0.00127367C12.0714 0.00660201 12.7315 0.27311 13.2298 0.746671C13.7076 1.23651 13.9824 1.88848 13.9992 2.57201C14.0159 3.25554 13.7733 3.92015 13.32 4.4327L4.23648 13.5331C4.13482 13.6342 4.0017 13.6978 3.85903 13.7133L0.667067 14L0.609628 13.959ZM1.43018 10.4696L1.25787 12.714L3.50619 12.5092L12.4502 3.56444C12.6246 3.35841 12.7361 3.10674 12.7714 2.83933C12.8067 2.57193 12.7644 2.30002 12.6495 2.05591C12.5346 1.8118 12.3519 1.60575 12.1231 1.46224C11.8943 1.31873 11.6291 1.2438 11.3589 1.24633C11.1813 1.23508 11.0033 1.25975 10.8355 1.31887C10.6677 1.37798 10.5136 1.47033 10.3824 1.59036L1.43018 10.4696Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_20836">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PencilIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/plus/index.vue b/components/lib/icons/plus/index.vue
@@ -1,23 +1,30 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_306_11939)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
                 fill="currentColor"
             />
         </g>
         <defs>
-            <clipPath id="clip0_306_11939">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PlusIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>
diff --git a/components/lib/icons/refresh/index.vue b/components/lib/icons/refresh/index.vue
@@ -1,6 +1,6 @@
 <template>
     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <g clip-path="url(#clip0_414_20758)">
+        <g :clipPath="`url(#${pathId})`">
             <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"
@@ -9,17 +9,24 @@
             />
         </g>
         <defs>
-            <clipPath id="clip0_414_20758">
+            <clipPath :id="`${pathId}`">
                 <rect width="14" height="14" fill="white" />
             </clipPath>
         </defs>
     </svg>
 </template>
+
 <script>
 import BaseIcon from 'primevue/baseicon';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'RefreshIcon',
-    extends: BaseIcon
+    extends: BaseIcon,
+    computed: {
+        pathId() {
+            return `pr_icon_clip_${UniqueComponentId}`;
+        }
+    }
 };
 </script>