我如何使用 vuejs3 中的图标？

Question

我想使用 icons-vue 所以我安装了这个命令：yarn add @element-plus/icons-vue

这是文档：https://element-plus.org/en-US/component/icon.html#icon-usage

但是我刷新页面的时候看不到图标，如何显示图标？

我尝试在全球范围内使用

import ElementPlusIcons from '@element-plus/icons-vue'
...
createApp(App)
  
  .use(ElementPlusIcons)

但不起作用

<el-menu-item >
            <el-icon>  <edit></edit></el-icon>
</el-menu-item>

我的项目无法识别该库

Answer 1

您需要使用 unplug-elementplus 插件 (https://github.com/element-plus/unplugin-element-plus)。

并在任何组件中手动导入图标以充分利用 tree shaking。

请参考https://element-plus.org/en-US/guide/quickstart.html#manually-import

另外请注意，element plus 是为 vue3 构建的