如何在Ant Design Vue Tree组件中替换默认文件夹图标为自定义SVG？

看起来你已经在尝试替换Tree组件的展开/收起切换图标了👍！接下来我会一步步教你完善这个功能，同时把默认的文件夹、叶子节点图标也换成你自己的SVG，完全适配你的Vue 3 + TypeScript + Tailwind技术栈。

一、先完善展开/收起的切换图标（支持状态切换） #

你当前用switcherIcon插槽只用到了switcherCls样式类，其实这个插槽的参数还包含expanded状态（标记节点是否展开），咱们可以利用它来根据状态切换不同的自定义SVG，让交互更合理。

两种实现方式： #

1. 用自定义SVG组件切换状态
   如果你已经把展开/收起的SVG做成了Vue组件，直接根据状态渲染即可：

<template #switcherIcon="{ switcherCls, expanded }">
  <!-- 展开时用向上的SVG，收起时用向下的SVG，保留AntD的默认样式类 -->
  <component :is="expanded ? IconChevronUp : IconChevronDown" :class="switcherCls" />
</template>

2. 直接内联SVG代码
   如果不想单独创建组件，也可以把SVG代码直接写在插槽里：

<template #switcherIcon="{ switcherCls, expanded }">
  <span :class="switcherCls">
    <svg v-if="expanded" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 12L3 7L4.41 5.59L8 9.17L11.59 5.59L13 7L8 12Z" fill="#171717"/>
    </svg>
    <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 8L7 13L5.59 11.59L8 9L4.41 5.59L6 4L11 9L12 8Z" fill="#171717"/>
    </svg>
  </span>
</template>

二、自定义文件夹/叶子节点的图标 #

要替换默认的文件夹和叶子节点图标，咱们需要用到Tree组件的#icon插槽——它能拿到当前节点的完整信息（比如是否是叶子节点isLeaf、是否展开expanded等），可以根据节点类型精准渲染自定义SVG。

步骤1：准备自定义SVG #

你可以把文件夹、叶子节点的SVG保存为独立的Vue组件，比如FolderIcon.vue和LeafIcon.vue，示例如下：

<!-- FolderIcon.vue 文件夹图标 -->
<template>
  <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.5 3H5.79C5.3 1.84 4.24 1 3 1H1.5C0.95 1 0.5 1.45 0.5 2V14C0.5 14.55 0.95 15 1.5 15H16.5C17.05 15 17.5 14.55 17.5 14V4C17.5 3.45 17.05 3 16.5 3Z" fill="#171717"/>
  </svg>
</template>

<!-- LeafIcon.vue 叶子节点图标 -->
<template>
  <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16 2H2C1.45 2 1 2.45 1 3V13C1 13.55 1.45 14 2 14H16C16.55 14 17 13.55 17 13V3C17 2.45 16.55 2 16 2Z" stroke="#171717" stroke-width="2"/>
  </svg>
</template>

步骤2：在Tree组件中使用icon插槽 #

回到你的Tree组件，添加这个插槽来替换默认图标：

<template #icon="{ node }">
  <!-- 根据节点是否为叶子节点，渲染对应的自定义SVG -->
  <LeafIcon v-if="node.isLeaf" class="mr-2" />
  <FolderIcon v-else class="mr-2" />
</template>

三、完整修改后的组件代码 #

结合你的现有代码，这里是最终的完整版本，包含所有自定义图标的实现：

<template>
  <Toolbar class="mt-16" />
  <a-tree 
    class="mt-4 rounded-3xl p-2 w-2/3 text-[#171717] bg-[#D9D9D9]" 
    v-model:expandedKeys="expandedKeys" 
    v-model:selectedKeys="selectedKeys" 
    show-line 
    :tree-data="treeData"
  >
    <!-- 自定义展开/收起切换图标 -->
    <template #switcherIcon="{ switcherCls, expanded }">
      <span :class="switcherCls">
        <svg v-if="expanded" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 12L3 7L4.41 5.59L8 9.17L11.59 5.59L13 7L8 12Z" fill="#171717"/>
        </svg>
        <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 8L7 13L5.59 11.59L8 9L4.41 5.59L6 4L11 9L12 8Z" fill="#171717"/>
        </svg>
      </span>
    </template>

    <!-- 自定义节点图标（文件夹/叶子） -->
    <template #icon="{ node }">
      <LeafIcon v-if="node.isLeaf" class="mr-2" />
      <FolderIcon v-else class="mr-2" />
    </template>
  </a-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Toolbar from './Toolbar.vue'
import FolderIcon from './icons/FolderIcon.vue'
import LeafIcon from './icons/LeafIcon.vue'
import type { TreeProps } from 'ant-design-vue'

const expandedKeys = ref<string[]>(['0-0-0'])
const selectedKeys = ref<string[]>([])

const treeData: TreeProps['treeData'] = [
  { title: 'parent 1', key: '0-0', children: [
    { title: 'parent 1-0', key: '0-0-0', children: [
      { title: 'leaf', key: '0-0-0-0', },
      { title: 'leaf', key: '0-0-0-1', },
      { title: 'leaf', key: '0-0-0-2', },
    ], },
    { title: 'parent 1-1', key: '0-0-1', children: [
      { title: 'leaf', key: '0-0-1-0', },
    ], },
    { title: 'parent 1-2', key: '0-0-2', children: [
      { title: 'leaf', key: '0-0-2-0', },
      { title: 'leaf', key: '0-0-2-1', },
    ], },
  ], },
]
</script>

额外小提示：全局替换Tree默认图标 #

如果你希望所有Tree组件都使用自定义图标，不用每个组件都写插槽，可以用Ant Design Vue的ConfigProvider来全局配置：

<template>
  <a-config-provider
    :component-config="{
      Tree: {
        switcherIcon: ({ expanded }) => h(expanded ? IconChevronUp : IconChevronDown),
        icon: ({ node }) => h(node.isLeaf ? LeafIcon : FolderIcon)
      }
    }"
  >
    <App />
  </a-config-provider>
</template>

不过这种方式适合全局统一风格，如果你只是单个组件需要自定义，还是用插槽更灵活。

内容来源于stack exchange