SvgIcon 组件使用网络图片时增加加载和失败状态

package.json

@@ -20,6 +20,7 @@
     "@headlessui/vue": "^1.7.22",
     "@vant/touch-emulator": "^1.4.0",
     "@visactor/vchart": "^1.11.9",
+    "@vueuse/components": "^10.11.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "animate.css": "^4.1.1",

src/components/SvgIcon/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { UseImage } from '@vueuse/components'
 import { Icon } from '@iconify/vue'
 
 defineOptions({
@@ -17,7 +18,7 @@ const outputType = computed(() => {
   const hasPathFeatures = (str: string) => {
     return /^\.{1,2}\//.test(str) || str.startsWith('/') || str.includes('/')
   }
-  if (/^https?:\/\//.test(props.name) || hasPathFeatures(props.name)) {
+  if (/^https?:\/\//.test(props.name) || hasPathFeatures(props.name) || !props.name) {
     return 'img'
   }
   else if (/i-[^:]+:[^:]+/.test(props.name)) {
@@ -59,11 +60,19 @@ const style = computed(() => {
 </script>
 
 <template>
-  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :class="{ [name]: outputType === 'unocss' }" :style="style">
-    <Icon v-if="outputType === 'iconify'" :icon="name" />
+  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
+    <i v-if="outputType === 'unocss'" class="h-[1em] w-[1em]" :class="name" />
+    <Icon v-else-if="outputType === 'iconify'" :icon="name" />
     <svg v-else-if="outputType === 'svg'" class="h-[1em] w-[1em]" aria-hidden="true">
       <use :xlink:href="`#icon-${name}`" />
     </svg>
-    <img v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
+    <UseImage v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
+      <template #loading>
+        <i class="i-line-md:loading-loop h-[1em] w-[1em]" />
+      </template>
+      <template #error>
+        <i class="i-tdesign:image-error h-[1em] w-[1em]" />
+      </template>
+    </UseImage>
   </i>
 </template>

src/views/feature/function/icon.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 definePage({
   meta: {
-    title: '图标',
+    title: 'pages.function.icon',
   },
 })
 
+const webImage = ref('https://picsum.photos/50')
+function change() {
+  webImage.value = ''
+  webImage.value = `https://picsum.photos/50?random=${Math.random()}`
+}
+
+const fm = new URL('@/assets/images/logo.png', import.meta.url).href
+
 const flip = ref<'horizontal' | 'vertical' | 'both'>()
 const rotate = ref(0)
 </script>
 
 <template>
-  <PageLayout navbar>
+  <PageLayout navbar navbar-start-side="back">
     <PageMain>
       <p>单色 Icon</p>
       <div>
@@ -30,6 +38,18 @@ const rotate = ref(0)
         <SvgIcon name="i-carbon:play-filled-alt" :size="48" :flip="flip" :rotate="rotate" />
         <SvgIcon name="i-carbon:pause-filled" :size="48" :flip="flip" :rotate="rotate" />
       </div>
+      <p>网络图片</p>
+      <SvgIcon :name="webImage" :size="48" :flip="flip" :rotate="rotate" />
+      <div class="space-x-2">
+        <HButton @click="change">
+          更改图片
+        </HButton>
+        <HButton @click="webImage = ''">
+          创建错误
+        </HButton>
+      </div>
+      <p>本地图片</p>
+      <SvgIcon :name="fm" :size="48" :flip="flip" :rotate="rotate" />
       <div>
         <p>翻转：</p>
         <van-radio-group v-model="flip" class="space-y-1">