Ant Design Vue菜单栏用 iconfont 矢量图标位置偏了 | 使用 h 函数渲染svg图标

问题

起因是我使用了 class 字段妄图想给 a-menu 添加图标，其他的都成功了，只有带children项的位置偏了

<template>
  <!--。。。其他标签-->
  <a-menu :items="items"></a-menu>
</template>

<script setup>
const items = reactive([
    {
        key: '1',
        class: 'iconfont icon-xxx'
    },
    {
        key: '2',
        class: 'iconfont icon-xxxx'
    },
    {
        key: '3',
        class: 'iconfont icon-xxxxx', // 这个图标歪了
        children: [
            {
                key: '4',
                label: ' xxxx',
                class: 'iconfont icon-xxxx',
            },
            {
                key: '5',
                label: ' xxxx',
                class: 'iconfont icon-xxxx',
            },
        ],
    },
    {
        key: '6',
        label: '待定一级',
        title: '待定一级',
        children: [
            {
                key: '7',
                label: '待定二级',
                title: '待定二级',
            },
        ],
    },
]);
</script>

效果如图

然后查了官网只有 icon 这个字段展示图标，没有class属性

解决方法

使用官网样例展示的 h 函数自己渲染图标

1.下载 iconfont 图标 并加入自己的本地项目

2.项目根目录的 main.js 里引入iconfont

// main.js
import '@/assets/icon/iconfont.js'

下载好的 iconfont 图标文件夹里有个 demo_index.html 可以学习三种引入方式

3.写一个全局图标样式

我写在了App.vue里，看个人喜好

/* 全局 h函数 渲染图标所使用的样式 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

4.使用 h函数 渲染图标

4.1 首先我们的这个图标的svg使用格式是下面这样（我们不直接在template中使用）：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-矢量图标名"></use>
</svg>

4.2 然后将上面的代码用 h函数 渲染就行了

<script setup>
import { h } from 'vue'; // 注意要引入 h函数

const items = reactive([
    // 。。。其他项
    {
        key: '3',
        icon: () => {
            return h(
                'svg',
                {
                    class: 'icon',
                    'aria-hidden': 'true',
                },
                [
                    h('use', {
                        'xlink:href': '#icon-chakan', // 替换为你的图标 ID
                    }),
                ]
            );
        }
        children: [
            {
                key: '4',
                label: ' xxxx',
            },
            {
                key: '5',
                label: ' xxxx',
            },
        ],
    },
    // 。。。其他项
]);
</script>

腰不疼了腿不酸了