SvgIcon 组件支持传入本地图片，网络图片增加载入和失败状态

2026-10-07 11:34:10 +08:00 · 2024-08-14 17:48:26 +08:00
parent cea5c718be
commit 4f9d806a02
5 changed files with 129 additions and 9 deletions
@@ -25,6 +25,7 @@
    "@imengyu/vue3-context-menu": "^1.4.2",
    "@tinymce/tinymce-vue": "^6.0.1",
    "@visactor/vchart": "^1.11.10",
+    "@vueuse/components": "^10.11.1",
    "@vueuse/core": "^10.11.0",
    "@vueuse/integrations": "^10.11.0",
    "animate.css": "^4.1.1",
@@ -29,6 +29,9 @@ importers:
      '@visactor/vchart':
        specifier: ^1.11.10
        version: 1.11.10
+      '@vueuse/components':
+        specifier: ^10.11.1
+        version: 10.11.1(vue@3.4.35(typescript@5.5.4))
      '@vueuse/core':
        specifier: ^10.11.0
        version: 10.11.0(vue@3.4.35(typescript@5.5.4))
@@ -2649,9 +2652,15 @@ packages:
  '@vue/shared@3.4.35':
    resolution: {integrity: sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==}

+  '@vueuse/components@10.11.1':
+    resolution: {integrity: sha512-ThcreQCX/eq61sLkLKjigD4PQvs3Wy4zglICvQH9tP6xl87y5KsQEoizn6OI+R3hrOgwQHLJe7Y0wLLh3fBKcg==}
+
  '@vueuse/core@10.11.0':
    resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}

+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
  '@vueuse/core@9.13.0':
    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}

@@ -2699,12 +2708,18 @@ packages:
  '@vueuse/metadata@10.11.0':
    resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}

+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
  '@vueuse/metadata@9.13.0':
    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}

  '@vueuse/shared@10.11.0':
    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}

+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
  '@vueuse/shared@9.13.0':
    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}

@@ -10236,6 +10251,15 @@ snapshots:

  '@vue/shared@3.4.35': {}

+  '@vueuse/components@10.11.1(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.4.35(typescript@5.5.4))
+      '@vueuse/shared': 10.11.1(vue@3.4.35(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@vueuse/core@10.11.0(vue@3.4.35(typescript@5.5.4))':
    dependencies:
      '@types/web-bluetooth': 0.0.20
@@ -10246,6 +10270,16 @@ snapshots:
      - '@vue/composition-api'
      - vue

+  '@vueuse/core@10.11.1(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.4.35(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4))':
    dependencies:
      '@types/web-bluetooth': 0.0.16
@@ -10273,11 +10307,20 @@ snapshots:

  '@vueuse/metadata@10.11.0': {}

+  '@vueuse/metadata@10.11.1': {}
+
  '@vueuse/metadata@9.13.0': {}

  '@vueuse/shared@10.11.0(vue@3.4.35(typescript@5.5.4))':
    dependencies:
-      vue-demi: 0.14.8(vue@3.4.35(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/shared@10.11.1(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { UseImage } from '@vueuse/components'
 import { Icon } from '@iconify/vue'

 defineOptions({
@@ -14,7 +15,10 @@ const props = defineProps<{
 }>()

 const outputType = computed(() => {
-  if (/^https?:\/\//.test(props.name)) {
+  const hasPathFeatures = (str: string) => {
+    return /^\.{1,2}\//.test(str) || str.startsWith('/') || str.includes('/')
+  }
+  if (/^https?:\/\//.test(props.name) || hasPathFeatures(props.name) || !props.name) {
    return 'img'
  }
  else if (/i-[^:]+:[^:]+/.test(props.name)) {
@@ -56,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>
@@ -14,6 +14,14 @@ const routes: RouteRecordRaw = {
    icon: 'i-ri:remixicon-line',
  },
  children: [
+    {
+      path: 'iconify',
+      name: 'iconExampleIconify',
+      component: () => import('@/views/icon_example/iconify.vue'),
+      meta: {
+        title: 'Iconify',
+      },
+    },
    {
      path: 'svg',
      name: 'iconExampleSvg',
@@ -23,11 +31,11 @@ const routes: RouteRecordRaw = {
      },
    },
    {
-      path: 'iconify',
-      name: 'iconExampleIconify',
-      component: () => import('@/views/icon_example/iconify.vue'),
+      path: 'image',
+      name: 'iconExampleImage',
+      component: () => import('@/views/icon_example/image.vue'),
      meta: {
-        title: 'Iconify',
+        title: 'Image Icon',
      },
    },
  ],
@@ -0,0 +1,56 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script setup lang="ts">
+const webImage = ref('https://picsum.photos/50')
+function change() {
+  webImage.value = ''
+  webImage.value = `https://picsum.photos/50?random=${Math.random()}`
+}
+
+const fa = new URL('@/assets/images/logo.png', import.meta.url).href
+
+const flip = ref<'horizontal' | 'vertical' | 'both'>()
+const rotate = ref(0)
+</script>
+
+<template>
+  <div>
+    <PageHeader title="Image Icon" content="可以使用本地或网络图片" />
+    <PageMain>
+      <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="fa" :size="48" :flip="flip" :rotate="rotate" />
+      <div>
+        <p>翻转：</p>
+        <ElRadioGroup v-model="flip">
+          <ElRadioButton value="">
+            无
+          </ElRadioButton>
+          <ElRadioButton value="horizontal">
+            水平翻转
+          </ElRadioButton>
+          <ElRadioButton value="vertical">
+            垂直翻转
+          </ElRadioButton>
+          <ElRadioButton value="both">
+            水平垂直翻转
+          </ElRadioButton>
+        </ElRadioGroup>
+        <p>旋转：</p>
+        <ElSlider v-model="rotate" :min="0" :max="360" style="width: 50%;" />
+      </div>
+    </PageMain>
+  </div>
+</template>