左侧菜单栏中的图标名称其实是一个图标的组件,要自定义图标,就要将图标封装成一个组件,然后使用。
封装组件
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: '标题' },
}