1
1
<script setup lang="ts">
2
+ import { UseImage } from ' @vueuse/components'
2
3
import { Icon } from ' @iconify/vue'
3
4
4
5
defineOptions ({
@@ -14,7 +15,10 @@ const props = defineProps<{
14
15
}>()
15
16
16
17
const outputType = computed (() => {
17
- if (/ ^ https? :\/\/ / .test (props .name )) {
18
+ const hasPathFeatures = (str : string ) => {
19
+ return / ^ \. {1,2} \/ / .test (str ) || str .startsWith (' /' ) || str .includes (' /' )
20
+ }
21
+ if (/ ^ https? :\/\/ / .test (props .name ) || hasPathFeatures (props .name ) || ! props .name ) {
18
22
return ' img'
19
23
}
20
24
else if (/ i-[^ :] + :[^ :] + / .test (props .name )) {
@@ -56,11 +60,19 @@ const style = computed(() => {
56
60
</script >
57
61
58
62
<template >
59
- <i class =" relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :class =" { [name]: outputType === 'unocss' }" :style =" style" >
60
- <Icon v-if =" outputType === 'iconify'" :icon =" name" />
63
+ <i class =" relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style =" style" >
64
+ <i v-if =" outputType === 'unocss'" class =" h-[1em] w-[1em]" :class =" name" />
65
+ <Icon v-else-if =" outputType === 'iconify'" :icon =" name" />
61
66
<svg v-else-if =" outputType === 'svg'" class =" h-[1em] w-[1em]" aria-hidden =" true" >
62
67
<use :xlink:href =" `#icon-${name}`" />
63
68
</svg >
64
- <img v-else-if =" outputType === 'img'" :src =" name" class =" h-[1em] w-[1em]" >
69
+ <UseImage v-else-if =" outputType === 'img'" :src =" name" class =" h-[1em] w-[1em]" >
70
+ <template #loading >
71
+ <i class =" i-line-md:loading-loop h-[1em] w-[1em]" />
72
+ </template >
73
+ <template #error >
74
+ <i class =" i-tdesign:image-error h-[1em] w-[1em]" />
75
+ </template >
76
+ </UseImage >
65
77
</i >
66
78
</template >
0 commit comments