index.vue
1.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script lang="ts" setup name="SvgIcon">
import { Icon } from '@iconify/vue'
const props = defineProps({
name: {
type: String,
required: true,
},
flip: {
type: String as () => 'horizontal' | 'vertical' | 'both' | '',
default: '',
},
rotate: {
type: Number,
default: 0,
},
})
const transformStyle = computed(() => {
const style = []
if (props.flip !== '') {
switch (props.flip) {
case 'horizontal':
style.push('rotateY(180deg)')
break
case 'vertical':
style.push('rotateX(180deg)')
break
case 'both':
style.push('rotateX(180deg)')
style.push('rotateY(180deg)')
break
}
}
if (props.rotate !== 0) {
style.push(`rotate(${props.rotate}deg)`)
}
return `transform: ${style.join(' ')};`
})
</script>
<template>
<Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
<svg v-else :style="transformStyle" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>
</template>