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>

效果如下：