Skip to content

Commit cea6403

Browse files
committed
feat: SvgIcon 组件支持传入本地图片,网络图片增加载入和失败状态
1 parent b1cb980 commit cea6403

File tree

3 files changed

+61
-5
lines changed

3 files changed

+61
-5
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
},
2525
"dependencies": {
2626
"@headlessui/vue": "^1.7.22",
27+
"@vueuse/components": "^10.11.1",
2728
"@vueuse/core": "^10.11.0",
2829
"@vueuse/integrations": "^10.11.0",
2930
"axios": "^1.7.3",

pnpm-lock.yaml

Lines changed: 44 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/components/SvgIcon/index.vue

100644100755
Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { UseImage } from '@vueuse/components'
23
import { Icon } from '@iconify/vue'
34
45
defineOptions({
@@ -14,7 +15,10 @@ const props = defineProps<{
1415
}>()
1516
1617
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) {
1822
return 'img'
1923
}
2024
else if (/i-[^:]+:[^:]+/.test(props.name)) {
@@ -56,11 +60,19 @@ const style = computed(() => {
5660
</script>
5761

5862
<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" />
6166
<svg v-else-if="outputType === 'svg'" class="h-[1em] w-[1em]" aria-hidden="true">
6267
<use :xlink:href="`#icon-${name}`" />
6368
</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>
6577
</i>
6678
</template>

0 commit comments

Comments
 (0)