Vue Vuetify3插槽嵌套v-icon失效：显示文本而非图标问题

Vuetify 3 的 <v-icon> 组件是通过直接读取原始文本节点内容来匹配并渲染图标的。当你通过自定义组件的插槽传递图标标识时，插槽中的文本会被 Vue 包装成一个包含文本节点的 VNode 对象，而非直接作为 <v-icon> 的子文本节点。<v-icon> 无法识别这种包裹后的插槽内容，因此只会把它当作普通文本渲染，而不会解析为图标。

修改自定义 Icon 组件，提取插槽中的纯文本内容，将其作为图标标识传递给 <v-icon>，而非直接嵌套插槽。

选项式API版本 #

<template>
  <v-icon>{{ iconName }}</v-icon>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "Icon",
  setup(props, { slots }) {
    const iconName = computed(() => {
      // 提取插槽中的纯文本并去除首尾空格
      const defaultSlot = slots.default?.();
      if (defaultSlot?.[0]) {
        return defaultSlot[0].text?.trim() || "";
      }
      return "";
    });

    return { iconName };
  },
});
</script>

Composition API（<script setup>）版本 #

<template>
  <v-icon>{{ iconName }}</v-icon>
</template>

<script setup lang="ts">
import { computed, useSlots } from 'vue';

const slots = useSlots();
const iconName = computed(() => {
  const defaultSlot = slots.default?.();
  // 确认插槽内容是文本节点后提取内容
  if (defaultSlot?.[0]?.type === Text) {
    return defaultSlot[0].text.trim();
  }
  return '';
});
</script>

修改后，原有的 <Icon>myprefix-plus</Icon> 调用方式完全不需要改动，组件内部会自动提取插槽中的文本作为图标标识，<v-icon> 即可正常渲染图标。

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