antd 中左侧菜单栏icon图标自定义

左侧菜单栏中的图标名称其实是一个图标的组件，要自定义图标，就要将图标封装成一个组件，然后使用。

封装组件

src/components/svgIcon/index.vue

<template>
  <div>
    <img src="@/assets/tuceng.png" alt="" />
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
img {
  width: 20px;
  height: 20px;
}
</style>

全局引入注册

main.ts

import svgIcon from '@/components/svgIcon/index.vue';

app.component('svgIcon',svgIcon);

使用

router/index.ts

 {
        name: 'xxxx',
        path: '/xxxx',
        meta: { icon: 'svgIcon', title: '标题' },
}