关于vue3:Element-Plus按需引入图标

自从应用了vue3就须要降级element ui到plus了。而相应的图标库也须要独自引入，这篇文章来记录一下 全局全副引入 和 按需引入 的办法。

引入全副图标

// main.ts// if you're using CDN, please remove this line.import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {  app.component(key, component)}

按需引入图标

<template>  <ul class="vat-theme-setting">    <li v-for="item in theme_items">      <a href="#">        <el-icon class="icon"><component :is="item.icon" /></el-icon>        <p>{{ item.label }}</p>      </a>    </li>  </ul></template><script setup lang="ts">// 按需引入图标import {  Menu,  BrushFilled,  ShoppingCart,  CopyDocument,  Delete} from '@element-plus/icons-vue'const theme_items = [  {label: '主题配置', icon: BrushFilled},  {label: '随机换肤', icon: Menu},  {label: '购买源码', icon: ShoppingCart},  {label: '拷贝源码', icon: CopyDocument},  {label: '清理缓存', icon: Delete},]</script><style lang="scss" scoped>  </style>

成果如下：