Vue3组件中鼠标悬停SVG图标时出现Blob请求的问题

我开发了一个加载并渲染SVG图标的Vue组件，代码如下：

<template>
    <div :class="attributes.class" v-html="icon"></div>
</template>

<script>
import {ref, onMounted} from "vue";
import axios from "axios";

const iconCache = new Map();

export default {
    name: "Icon",
    props: {
        name: {
            type: String,
            default: "slash-circle-01",
        },
    },
    setup(props) {
        const icon = ref("");
        const attributes = ref({class: "shrink-0"});

        async function fetchIcon(iconName) {
            if (iconCache.has(iconName)) {
                return iconCache.get(iconName);
            }

            try {
                const {data} = await axios.get(`/assets/icons/${iconName}.svg`);
                iconCache.set(iconName, data);
                return data;
            } catch (e) {
                console.error(e);
                if (iconName !== "slash-circle-01" && !iconCache.has("slash-circle-01")) {
                    return fetchIcon("slash-circle-01");
                }
            }
        }

        onMounted(async () => {
            icon.value = await fetchIcon(props.name);
        });

        return {icon, attributes};
    },
};
</script>

组件能正常渲染，但鼠标悬停或在图标上移动时，开发者工具Network标签里会出现Blob请求，找不到原因。

可能原因 #

这类Blob请求常见触发因素：

• SVG内部的资源引用：如果SVG里用了<use>标签的href/xlink:href引用外部资源，或者内部元素引用的路径写法有问题，浏览器会解析成Blob请求；
• 开发者工具预览机制：Chrome等浏览器的DevTools在鼠标悬停SVG元素时，会自动生成预览图，这个过程会触发Blob请求；
• SVG动态内容：SVG包含动画、滤镜等需要动态加载的内容时，也可能引发这类请求。

解决办法 #

1. 检查并清理SVG文件 #

打开你的SVG文件，做这些调整：

• 移除<use>标签中指向外部的href引用，内部元素引用改用ID（比如href="#icon-id"）；
• 删除无用的xmlns:xlink声明；
• 去掉SVG里不需要的动画、滤镜等动态内容（如果用不到的话）。

2. 替换组件渲染方式 #

用v-html直接插入SVG容易引发这类问题，可以换成SVG组件导入的方式：
先安装vue-svg-loader，然后修改组件代码：

<template>
  <div :class="attributes.class">
    <component :is="iconComponent" />
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      default: 'slash-circle-01',
    },
  },
  setup(props) {
    const attributes = ref({ class: 'shrink-0' });
    const iconComponent = computed(() => {
      return () => import(`../assets/icons/${props.name}.svg`);
    });

    return { iconComponent, attributes };
  },
};
</script>

3. 临时排查：关闭DevTools SVG预览 #

如果是DevTools导致的，在Chrome的DevTools设置里，找到Experiments，取消勾选Enable SVG preview，Blob请求就会消失，这种情况不需要修改代码。

内容的提问来源于stack exchange，提问作者Andrei RRR