如何使用 vuejs3 中的图标？

Posted 2023-03-16

【中文标题】如何使用 vuejs3 中的图标？

【英文标题】：How can i use icons from vuejs3?

【发布时间】：2022-01-18 21:54:25

【问题描述】：

我想使用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>

我的项目无法识别该库

【参考方案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 构建的

【讨论】：

我想要的是图标而不是元素

@PavaJ 我正在使用 vue3

是的，您可以在组件中使用以下语句： import ElementPlusIcons from '@element-plus/icons