最近在看大佬写的stepin后台管理系统，框架是vue3+antd3.x+vite，下面记录一下，菜单图标的使用方法。

1.第一种方法就是使用antd中的icon图标

书写方式如下：

{
  path: '/',
  name: '首页',
  redirect: '/analysis',
  meta: {
    title: '首页',
    renderMenu: false,
    icon: 'CreditCardOutlined',//使用大驼峰的命名方式
  },
},

2.第二种方法就是使用iconfong中的图标

这种方式有两种处理方式：

2.1 使用框架中的plugins中的IconFont.vue组件——适用于静态路由

IconFont.vue组件内容如下：

<script lang="ts" setup>
  defineProps({ name: String });
</script>
<template>
  <span role="img" style="line-height: 1">
    <svg fill="currentColor" style="vertical-align: top" width="1em" height="1em" aria-hidden="true">
      <use :xlink:href="`#${name}`"></use>
    </svg>
  </span>
</template>

2.2 全局注册图标为组件，然后菜单里图标直接配置为注册的图标组件名——适用于静态路由+异步路由

2.3 为啥第二种推荐异步路由使用？

因为第一种 icon 的值是一个函数式vue组件。异步路由获取的图标配置要解析成vue 组件才行。
第二钟因为提前全局注册了，icon 只要配置为组件名即可

使用第二步中的外部引入的图标，前提是需要在public文件中引入外部文件字体。

具体可以参考下面文章链接中的前两个步骤即可。阿里巴巴矢量图标库的引入：http://t.csdn.cn/PTPdS

完成！！！多多积累，多多收获！！！

最后附上效果图：