先创建一个vue文件, 引入svg代码, 这个文件放components里也挺好
**
catalogIcon.vue代码如下:
**
html
<template>
<svg t="1725419972935" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487" width="20" height="20">
<path
d="M341.312 170.688H896V256H341.312V170.688zM192 277.312a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM192 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m0 294.4a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m149.312-401.088H896v85.376H341.312V469.312z m0 298.688H896v85.312H341.312V768z"
p-id="1488"
fill="#ffffff"
></path>
</svg>
</template>
<script setup></script>
<style scoped>
svg {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
}
</style>
**
svg代码获取:
**
你可以把去阿里图标库里找到自己需要的图标, 点下载, 选好自己需要的颜色后点 复制SVG代码.,复制出来粘贴到上面代码里即可;
**
去main.ts里引用 catalogIcon.vue
**
html
import MyCatalogIcon from './assets/iconfont/catalogIcon.vue';
const app = createApp(App);
app.component('MyCatalogIcon', MyCatalogIcon);
**
页面引用
**
html
<template>
<div class="sidebar">
<el-menu class="sidebar-el-menu" :default-openeds="['/SystemConfiguration']" :default-active="onRoutes" unique-opened router>
<template v-for="item in routes">
<template v-if="item.subs">
<el-sub-menu :index="item.path" :key="item.path">
<template #title>
<el-icon>
<component :is="item.icon"></component>
</el-icon>
<span>{{ item.title }}</span>
</template>
<template v-for="subItem in item.subs">
<el-menu-item :index="subItem.path">{{ subItem.title }}</el-menu-item>
</template>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.path" :key="item.path">
<el-icon>
<component :is="item.icon"></component>
</el-icon>
<template #title>{{ item.title }}</template>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { Pouring, UserFilled, Operation } from '@element-plus/icons-vue';
import MyCatalogIcon from '../../../assets/iconfont/catalogIcon.vue';//这里引用
const routes = [
{
icon: MyCatalogIcon,//这里引用
path: '/SystemConfiguration',
title: '资源目录',
subs: [],
},
{
icon: UserFilled,
path: '/SystemConfigtion/user',
title: '管理',
},
{
icon: Operation,
path: '/SystemConfiguon/setting',
title: '设置',
},
];
</script>
**
页面效果
**