Fixed #3959 - Dynamic clipPath support for icons

This commit is contained in:
Tuğçe Küçükoğlu 2023-06-05 15:52:54 +03:00
parent cb073ff71a
commit 0da0751256
27 changed files with 270 additions and 81 deletions

View file

@ -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_417_21589)">
<g :clipPath="`url(#${pathId})`">
<path
fill-rule="evenodd"
clip-rule="evenodd"
@ -9,17 +9,24 @@
/>
</g>
<defs>
<clipPath id="clip0_417_21589">
<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: 'TrashIcon',
extends: BaseIcon
extends: BaseIcon,
computed: {
pathId() {
return `pr_icon_clip_${UniqueComponentId}`;
}
}
};
</script>