fix: flip not working on BaseIcon component

This commit is contained in:
Fabio Di Stasio 2023-09-18 08:56:26 +02:00
parent cb92ca99f6
commit 922f56f69b
1 changed files with 22 additions and 1 deletions

View File

@ -3,8 +3,8 @@
:type="type" :type="type"
:path="iconPath" :path="iconPath"
:size="size" :size="size"
:flip="flip"
:rotate="rotate" :rotate="rotate"
:class="iconFlip"
/> />
</template> </template>
@ -39,4 +39,25 @@ const props = defineProps({
const iconPath = computed(() => { const iconPath = computed(() => {
return (Icons as {[k:string]: string})[props.iconName]; return (Icons as {[k:string]: string})[props.iconName];
}); });
const iconFlip = computed(() => {
if (['horizontal', 'vertical', 'both'].includes(props.flip))
return `flip-${props.flip}`;
else return '';
});
</script> </script>
<style lang="scss" scoped>
.flip-horizontal {
transform: scaleX(-1);
}
.flip-vertical {
transform: scaleY(-1);
}
.flip-both {
/* flip both */
transform: scale(-1, -1);
}
</style>