element-plus怎么按需导入icon?

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

回复
阅读 807
2 个回答

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

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

如果想要按需引入,就不能直接复制下面 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> 这个组件。可以自己手动引入,也可以看官方提供的自动引入的文档关于自动导入的部分

新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏