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>

效果如下：