vue3 Element Plus中icon图标不显示

Luckyflowers

已于 2022-04-13 14:00:33 修改

阅读量4.9k

点赞数 4

分类专栏： Element-plus 文章标签： elementui 前端框架 vue

于 2022-04-12 19:42:36 首次发布

本文链接：https://blog.youkuaiyun.com/m0_68683769/article/details/124131266

版权

本文档主要解决Vue3项目中使用Element Plus框架时遇到的图标不显示的问题。介绍了问题描述、安装步骤、基本使用方法，包括全局注册组件、按需使用和全局引入的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

Vue3 + Element-plus的项目中icon图标不显示

安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

基本使用

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

如若想查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue 和 element-plus-icons 的源代码或 element-plus 的 Icon Collection

实现效果

在这里插入图片描述

在模板中插入代码

<template>
	<!-- 结合 el-icon 使用（el-icon 为原始的 SVG 图标提供额外的属性） -->
	<el-icon><Search /></el-icon></

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Luckyflowers

关注关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用＜el-icon＞组件图标（项目使用 Element Plus 内置图标不用再引入了）

王二红

09-08

7873

vue3elementplus图标组件el-icon，vue3elementplus组件库每次都需要import引入图标才能用吗，vue3elementplus图标组件如何不用引入就能使用，elementplusel-icon如何不引入直接使用，Vue3ElementPlus如何像ElementUI一样简单使用icon，ElementPlus怎么使用el-icon，elementplus图标使用详细教程，vue3全局注册elementplus图标库教程，vue3引用eleme

《Vue3笔记》第10节：Vue3项目引入Element Plus图标库

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

12-27

324

这篇文章基于之前的项目代码之上，介绍Vue3项目中如何引入Element Plus的图标库组件。

参与评论您还未登录，请先登录后发表或查看评论

begefefsef的博客

03-09

4479

element-plus版本^1.2.0-beta.5的icon图标问题：继element旧版更新后，新版的element-plus的图标引用修改了，很多小伙伴们不会用，这篇文章将介绍两种用法前置条件： npm install @element-plus/icons-vue 全局引用：打开main.js文件 // 导入所有的el-icon图标 import * as ElIconModules from '@element-plus/icons' const app = createApp(App

【vue3】【element-plus】icon显示不出来

qq_63514555的博客

12-05

3356

输入框里面利用prefix-icon属性在 input 组件首部和尾部增加显示图标，但是一直是空白的

解决electron-builder vue 打包后element-ui字体图标不显示问题

热门推荐

weixin_44017994的博客

02-12

1万+

问题描述在vue组件中使用了Element Plus中icon图标<el-icon>方法想要显示图标，程序能运行但在浏览器中图标无法显示。解决办法根据Element Plus官方文档给出的教程以及实践操作，解决办法如下： 1.安装在终端运行下面指令 npm install --save @element-plus/icons 注意：Element Plus官方文档给出的指令为npm install @element-plus/icons-vue，但运行时终端可能会提供更正确的指令

vue3+element-plus时，icon图标不显示的解决办法

技术前端，忠于热爱 @回忆哆啦没有A梦

05-28

7317

vue3+element-plus时，icon图标不显示的解决办法；el-icon-edit，icon="el-icon-search"写法，不显示图标，但是还有占位。

Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）

无面人的博客

12-08

3735

在Vue3中，想在表格的字段中引入图标；因为给字段做了触发提示，因此想加个图标提示一下用户；但是开发过程中出现图标不显示等问题，因此记录一下解决方案

Vue3中element-plus全局使用Icon图标

m0_67393342的博客

03-09

2849

Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单 1、安装图标库 npm install @element-plus/icons 2、注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app

vue3+Element-plus icon图标无法显示的问题(已解决)

m0_67402970的博客

03-06

2178

项目场景：在使用vue3+element-puls时,默认的icon图片无法显示的问题问题描述：在使用element-plus 1.2.0-beta.3版本时引入侧栏组件时,导航左侧icon图标无法显示效果图应该是源码如下 <el-row class="tac"> <el-col :span="12"> <h5>Default colors</h5> <el-menu default-ac

【已解决】vue3+ts使用Element-Plus icon图标不显示|element plus 使用 icon 图标教程

肥晨开发的学习之路

03-25

1万+

Element Plus 的图标组件也支持自定义图标。你可以通过 el-icon 组件的 name 属性来指定一个自定义图标的类名，并在你的 CSS 中定义这个类名对应的图标样式。/* 或者使用字体图标 *//* 其他样式 */确保你的自定义图标样式正确无误，并且图标的路径也是正确的。如果你使用的是字体图标，你可能需要设置 font-family 和其他相关属性。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

解决element-plus使用图标不显示问题

白百柏在帝都

07-24

9940

解决element-plus使用图标不显示问题

Vue3使用Element Plus引入Icon不显示

weixin_43816034的博客

03-03

1879

先安装Element Plus的Icon库 npm install @element-plus/icons-vue 控制台警告信息： runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Failed to resolve component: plus If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.

【已解决】Vue3+Element-plus中icon图标不显示的问题

慢热型网友的博客

06-27

5762

今天博主正在学习Springboot+Vue的后台管理项目，对着B站的教程视频在模仿着敲，发现和up主的代码一样但是图标不显示！在摸索了近半个小时之后，发现新版的Element Plus在进行图标引入时需要按需引入官网：https://element-plus.gitee.io/zh-CN/ 图标教程：https://element-plus.gitee.io/zh-CN/component/icon.html 前面的安装以及注册所有图标在这里就不多描述了，直接放上代码...

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

m0_59013395的博客

04-07

514

最后一定要记得components写出来！我当时就漏了把Lock标签导入，捣鼓半个小时才发现，害。import引入你要导入图标比如我要导入这两个图标。最最最最重要的一部来了，我就捣鼓了半个小时。然后后在main.js文件导入。

vue使用Element-plus

六月Bing的博客

12-28

973

用法 1.下载资源文件 npm install element-plus --save 2.引入完整引入如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。 main.ts import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(Ap

Vue3+Element-plus icon图标不展示问题

hgfzero的博客

03-20

947

没有在main.js/main.ts文件中注册所有图标。

element-plus新版本icon使用

Lizejin961019的博客

12-16

4262

最近使用element-plus的icon总是不显示，也是头发掉了一大把，测试了很多办法以后也终于是解决了。记录一下解决方案。 <el-form-item> <el-input :prefix-icon="Avatar" v-model="form.username" placeholder="用户名"></el-input> </el-form-item> <script> export default { name: "Logi

关于Vue3.0引入Element-plus报错

源辰_付鹏程

08-15

1万+

应该是版本问题，用vue-cli新建vue3.0的项目没问题，然后引入Element-plus则项目直接报错，是版本不兼容，如果要用的话，建议不要使用npm安装Element-plus了，可以使用 vue add element-plus 详情参考我的：https://blog.youkuaiyun.com/u011724770/article/details/113996287?spm=1001.2014.3001.5501 ...

vue3 element-plus icon

03-21

<think>好的，我现在需要帮助用户解决在Vue3中使用Element Plus图标组件的问题。首先，我要回忆一下Element Plus的文档和相关资源。根据用户提供的引用，特别是引用[2]中的代码示例，看起来他们已经在尝试使用图标组件，但可能遇到了问题。首先，用户提到的是Vue3，而Element Plus确实是为Vue3设计的，所以需要确保安装的版本正确。用户可能需要先安装Element Plus和相关的图标包。引用[2]中的代码示例显示他们引入了Plus图标，但可能没有正确安装或导入图标库。接下来，我需要检查步骤是否正确。通常，使用Element Plus的图标需要单独安装@element-plus/icons-vue包，这在引用[2]的脚本部分提到过。用户可能漏掉了安装步骤，或者没有正确注册组件。例如，在Vue3中，可能需要使用不同的方式导入图标，比如全局注册或者局部导入。另外，用户可能在模板中使用图标的方式是否正确。根据引用[2]的例子，他们使用了:icon="Plus"，但正确的用法可能需要将图标组件直接放在模板中，而不是作为属性。例如，使用<el-icon><Plus/></el-icon>的结构。还要考虑样式问题，是否缺少必要的CSS导入，或者是否在Element Plus的插件安装时没有正确配置。另外，检查是否在main.js或类似入口文件中正确引入了Element Plus及其样式。最后，可能需要指导用户如何按需导入图标以优化性能，或者使用自动导入工具如unplugin-icons来简化流程。同时，提醒用户注意版本兼容性，确保所有依赖项都是针对Vue3的。</think>在Vue3中使用Element Plus的图标组件需要遵循以下步骤： ### 一、安装依赖 ```bash npm install element-plus @element-plus/icons-vue ``` ### 二、全局注册（可选）在main.js中全局注册图标： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(ElementPlus) ``` ### 三、组件内使用在模板中直接使用图标组件（引用[2]示例的改进版）： ```vue <template> <el-button type="primary"> <plus /> 主要按钮 </el-button> </template> <script setup> import { Plus } from '@element-plus/icons-vue' </script> ``` ### 四、按需导入（推荐）使用unplugin-auto-import优化导入： 1. 安装插件： ```bash npm install -D unplugin-auto-import ``` 2. 在vite.config.js中配置： ```javascript import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ imports: [ 'vue', { '@element-plus/icons-vue': ['Plus', 'Edit'] // 按需导入图标 } ] }) ] }) ``` ### 五、图标使用方式对比 | 方式 | 优点 | 缺点 | |-----------|---------------------|---------------------| | 全局注册 | 一次注册全局使用 | 增加包体积 | | 局部导入 | 精确控制图标使用 | 每个组件需单独导入 | | 自动导入 | 开发便捷，智能导入 | 需要配置构建工具 | ### 常见问题解决 1. **图标不显示**： - 检查是否安装`@element-plus/icons-vue` - 确认组件名称大小写正确（PascalCase） - 查看浏览器控制台是否有404错误 2. **样式问题**： ```javascript import 'element-plus/dist/index.css' // 确保已导入基础样式 ``` 3. **TypeScript支持**：在tsconfig.json中添加类型声明： ```json { "compilerOptions": { "types": ["@element-plus/icons-vue/global"] } } ``` ### 最佳实践建议 1. 对于常用图标建议全局注册（不超过20个） 2. 使用自动导入工具优化开发体验[^4] 3. 配合Element Plus的`<el-icon>`组件使用动画效果： ```vue <template> <el-icon :size="20" color="#409EFC"> <loading /> </el-icon> </template> ```