element-plus怎么按需导入icon？

Question

照着官方给的示例icon里的的组件还是无法解析，只能全局引入

Answer 1

文档里面说的很直白了吧：

如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。

如果想要按需引入，就不能直接复制下面 icon 列表里面的用例去使用了。因为复制出来是这样的：<el-icon><Plus /></el-icon> 。
你得去 import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons-vue' 引入图标，然后再去使用。
比如说：

<template>
  <div>
    <Edit />
  </div>
</template>
<script>
import { Edit } from '@element-plus/icons-vue'
export default {
  components: { Edit }
}
</script>
// 或者这样
<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

也可以考虑自动引入的方式，比如说官方提供的模板

---

如果你还想使用 <el-icon> 这个组件的话，也许需要引入 <el-icon> 这个组件。可以自己手动引入，也可以看官方提供的自动引入的文档关于自动导入的部分

Answer 2

基于Vue3+Element-plus使用最新技术栈的的中后台模板
你可以参考这个后台管理模板的方案， 项目中按需引入了element-plus的图标，且支持按需引入其他iconify的图标，对本地svg图标也做了封装，也支持动态渲染图标