css - 如何使用 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）。

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

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

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