naiveui 的n-menu使用字体icon解决方案

 先看效果

 

 好，来直接说操作方法

本博文参考文献如下

        1、naiveUI table 自定义单元格 iconfont 图标_小肉包de的博客-CSDN博客

        2、vue3 + naive组件UI 运用h()函数和封装的svg组件动态创建svg图片_stargazer1201的博客-CSDN博客

      3、微信公众号：程序员野区

      4、Naive UI

正文

1、复制阿里icon的链接 

2、 放index.html里

 3、我先贴个整体的代码，你们看的懂就不用往下看

<template>
    <n-layout has-sider style="height:100vh">
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
      >
        <n-menu
          v-model:value="activeKey"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
        />
      </n-layout-sider>
      <n-layout>
        <!-- <img style="height: 200px;" src="/img/1.jpg"/>
        <img style="height: 200px;" src="/img/2.jpg"/>
        <img style="height: 200px;" src="/img/3.jpg"/><br/>
        <img style="width:  400px;" src="/img/4.png"/>
        <img style="width: 400px;" src="/img/5.png"/>
        <img style="width: 400px;" src="/img/6.png"/><br/> -->
      </n-layout>
    </n-layout>
</template>
<script setup lang="ts">
    import {ref,h} from "vue"
    import { NIcon } from 'naive-ui'
    import type { MenuOption } from 'naive-ui'
    const collapsed=ref<boolean>(true);
    const activeKey=ref<string | null>(null)
    function renderIcon (icon: string) {
        // return () => h(NIcon, null, { default: () => h(icon) })
        return () => h(NIcon, {
            class: 'iconfont '+icon,
            // onClick: () => showMap(row)
        })
    }
    //博主的公众号：程序员野区
    //博主的小程序：程序员实用资源
    //博主的视频号：程序员整活日常
    const menuOptions: MenuOption[] = [
        {
            label: '左侧图标用的阿里iocn',
            key: 'hear-the-wind-sing',
            icon: renderIcon("icon-home")
        },
        {
            label: '也就是用的iconfont',
            key: 'pinball-1973',
            icon: renderIcon("icon-shuba"),
            children: [
            {
                label: '右侧是博主创业项目',
                key: 'rat'
            }
            ]
        },
     ]

</script>
<style></style>

4、看不懂的来

这个是左侧组件

<n-menu
          v-model:value="activeKey"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
        />

 看明白了吗，重点在 h(NIcon, {