vue3 + ts + element ui plus 添加阿里图标库图标(只添加一个, 并引入)

先创建一个vue文件, 引入svg代码, 这个文件放components里也挺好
在这里插入图片描述
**

catalogIcon.vue代码如下:

<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"><pathd="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

import MyCatalogIcon from './assets/iconfont/catalogIcon.vue';
const app = createApp(App);
app.component('MyCatalogIcon', MyCatalogIcon);

页面引用

<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">javascript">
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>