关于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>

成果如下：

引入全副图标

按需引入图标