vue3中使用element-plus的图标不显示问题

Posted 2023-04-17

参考技术A 按照官网的写法，我的图标不显示的：

然后我搜了一些大神的博客说是vite版本改为2.3.7（但是我的依然不可以！！！！！！！！！！！！！！！！）

有两种解决方案：
第一种：我项目下的就是element-plus 但是他官网说的图标引入方法我不能用，但是我用vue2的图标引入写法 在里面就能显示

第二种：比如：有个图标叫select,最好给图标起个别名,然后当作组件引入。就可以使用了,记得使用组件别名做标签！！

如何使用 vuejs3 中的图标？

【中文标题】如何使用 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