最近在看大佬写的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

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

最后附上效果图：