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

先创建一个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>

**

页面效果

**

相关推荐
栈老师不回家7 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙13 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠17 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds37 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app