element-plus icon图标的正确使用姿势

最新推荐文章于 2024-05-17 21:44:10 发布

蒙娜丽莎的Java

最新推荐文章于 2024-05-17 21:44:10 发布

阅读量1.5k

点赞数 1

分类专栏：前端 html 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_60721514/article/details/123344950

版权

本文介绍了在Vue3中使用Element-Plus图标时遇到的问题及解决方法。Element-Plus图标由样式封装变为组件，导致错误使用时图标无法显示。通过了解Vue3的setup script语法糖，可以正确引入并使用图标，简化代码。同时，文章提到setup script虽方便但尚属实验性功能，建议谨慎使用。

摘要由CSDN通过智能技术生成

前言：

为了适应vue3的更新，element组件也将其内容升级为了plus用以配套的使用，很多组件新增了更加多元的功能，但我用的时候就觉得那个icon图标，怎么变得特别难用呢？原来是没有掌握正确的使用方法

改变：

// 原来
<i class="el-icon-edit"></i>

// plus
 <el-icon :size="size" :color="color">
   <edit></edit>
 </el-icon>

根据文档也能看出，图标从原来的一个样式封装成了一个组件，在今后的版本迭代中可能会赋予图标更多的功能（目前支持尺寸和大小），这无疑是很方便的，但是在使用的时候发现，我的图标为什么显示不出来？？？

错误使用：

根据教程先下载相关包

然后按需引入图标，并使用

实际展示却是：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蒙娜丽莎的Java

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element plus的icon使用及动态调用

m0_64590669的博客

10-27

1081

element plus的icon使用及动态调用

Element-plus组件库基础组件使用

热门推荐

前端技术

02-09

1万+

element plus 使用 icon 图标(两种方式)

Element Plus中图标的使用

weixin_51293134的博客

08-21

992

首先需要安装element-plus的icon库。

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

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

05-28

6280

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

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

m0_67402970的博客

03-06

2022

项目场景：在使用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中element-plus全局使用Icon图标

m0_67393342的博客

03-09

2747

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使用elementplus图标

qq_45438471的博客

09-07

3465

在实际项目中，我们常常需要用到图标，所以本文主要来介绍一下vue3使用elementplus图标的方法。

Vue3 第十篇：使用ElementPlus图标

Good Luck

06-22

3520

Element Plus 提供了一套常用的图标集合。1.安装 2.全局注册 3.使用

Element Plus图标显示使用教程

qq_44182261的博客

11-26

1751

一、安装不会安装的去哔哩哔哩找视频或者百度 npm install @element-plus/icons 二、导入导入你的Component Avatar，Lock 对应你在官网中看见的图标名字 import { Avatar, Lock } from '@element-plus/icons' 三、在组件中声明在你的组件中声明你要使用的图标（你要用什么图标就声明声明图标），如图所示：四、在数据中把它返回去把图标返回页面中五、效果展示 svg-图标集合-适用于-

Element Plus 的 el-icon 到底怎么用？

weixin_39415598的博客

06-24

5315

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。本文简介点赞 + 关注 + 收藏 = 学会了在 Vue 生态里， Element UI 是排名前列的组件库。在 Vue 发布到 3.0 时，Element 也发布了对应的组件库。也就是 Element Plus 。随之而来的用法也跟着变了。比如本文要讲的 el-icon 的用法。在 Element Plus 里，Icon 图标的用法和以前不一样了。虽然官方文档也有说明怎么用，但不是非常详细，可能

vite+vue3使用element-plus图标方案

Cipher_Y的博客

07-18

1924

自从Vue发布了3x版本后，Element UI也发布了对应的组件库版本，图标使用上也发生了改变，特意记录下，希望可以帮到大家!PS:抛弃了字体图标的用法，直接使用了svg的方式。并且需要单独下载如果文章对你有帮助，可以，如果大家有更好意见或方案，欢迎评论区指出。

Element-plus的icon图标不显示解决方案

ZYXKN的博客

01-27

3691

这篇文章就记录一下vue3环境下element-plus怎么使用icon图标

Element-Plus 实现动态渲染图标教程

interest_ing_的博客

03-27

2383

Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在 Element-Plus 中，我们可以使用 `` 标签来动态渲染组件，这使得在菜单中根据条件动态显示不同的图标成为可能。本文将介绍如何使用 Element-Plus 和 Vue.js 来实现动态渲染图标的功能。

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

肥晨开发的学习之路

03-25

8719

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

Element-Plus-动态渲染 ICON

Sunny_boy

05-17

864

【代码】Element-Plus-动态渲染 ICON。

element-plus使用图标

07-28

要在 Element Plus 中使用图标，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 Element Plus。您可以使用 npm 或 yarn 进行安装： ```bash npm install element-plus ``` 或者 ```bash yarn add element-plus ``` 2. 在您的项目中导入 Element Plus 的样式和图标。您可以选择在您的入口文件（如 `main.js`）中导入样式： ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 请注意，您需要替换 `App` 为您自己的根组件。 3. 现在，您可以在您的组件中使用 Element Plus 的图标了。例如，要在按钮上使用图标，可以使用 `ElButton` 组件并设置 `icon` 属性为图标名称： ```vue <template> <el-button type="primary" icon="el-icon-search">搜索</el-button> </template> ``` 在上面的示例中，我们使用了名为 `el-icon-search` 的搜索图标。 4. 您还可以在其他 Element Plus 组件中使用图标，比如菜单、导航、表格等等。具体的图标名称和用法可以参考 Element Plus 的官方文档。这就是使用 Element Plus 中的图标的基本步骤。希望能对您有所帮助！