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>

效果如下：