el-icon图标 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

比如本文要讲的 el-icon 的用法。在 Element Plus 里，Icon 图标的用法和以前不一样了。虽然官方文档也有说明怎么用，但不是非常详细，可能会给新手带来一丢丢障碍。...本文将花几分钟的时间讲解 el-icon 几种用法和注意事项。注意：需要留意本文发表时间与使用的 Element Plus 版本，随着时间的推移可能会出现使用上的差异。...一起使用 Element Plus 还提供了 el-icon 组件用来包裹 svg图标组件，使得设置图标大小和颜色更加方便。...) .mount('#app') 在页面中使用 el-icon :size="20" color="hotpink"> el-icon> 此时，在 el-icon 上设置...局部引入 el-icon :size="30" color="hotpink"> el-icon> </div

8K3 0

二次封装 el-icon

简介点赞 + 关注 + 收藏 = 学会了这是一篇对日常工作没什么帮助的文章~ 如果你还不太清楚 Element Plus 的 icon 是如何使用的，可以先阅读《Element Plus 的 el-icon...我在《Element Plus 的 el-icon 到底怎么用》里也对比过用法。...设计要实现的功能通过 type 属性使用指定的 svg 图标。...最终的使用方式因为是二次封装，所以不能用回 el-icon>，这是...图标名称首字母转大写通过中括号的方式动态获取 svg图标 <!

7563 0

您找到你想要的搜索结果了吗？

是的

没有找到

BuildAdmin03：为什么要定义图标组件

-- 定义icons-vue图标 --> el-icon :size="size" :color="color"> el-icon> el-icon要使用哪个图标？这一点主要在动态路由会讲，这里先简单的提一下。什么意思呢？...就是你从后端请求了菜单列表，控制台菜单要用图标A，会员中心菜单要用图标B，你该如何用el-icon渲染这些图标标签呢？...渲染对应图标这里可以看到，如果name是以el-icon开头，就渲染一个Element Plus的图标，如果是fa开头，就渲染font-awesome的图标。...我本来觉得svg用不到，就在Icon中只实现了el-icon和front-awesome两种图标，后来在实现导航栏时又回过头来，实现了svg图标，这个就留给下篇文章。

8585 0

Vue3！ElementPlus！更加优雅的使用Icon

/>el-icon> el-icon size="22" color="#000">el-icon> el-icon size="22" color="#000">el-icon> el-icon size="22" color="#000">el-icon> el-icon size="22" color="#000">el-icon> ...system，下面加载了这个图标集中的 bell 图标）： el-icon size="22" color="#000">el-icon.../>el-icon> // 无需手动引入图标组件是不是很简洁！！！

8K4 1

【Vue3+TypeScript】CRM系统项目搭建之 — 登录注册页【Tabs 选项卡的搭建以及 Tab 选项组件的插槽的使用】

这里如何给其添加图标呢？...第一个就想到这个组件是会给选项预留一个插槽的： Tab-pane 插槽首先，安装 element-plus 的图标 npm install @element-plus/icons-vue 阅读文档-使用图标...这里会使用全局进行注册图标。...> el-icon...>el-icon> 账号登录

5120 0

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

，自定义图标的解决方案。...，注意的是，我们使用的名字需要时这样的格式i-ep-name，例如 // 官方文档点击复制代码 el-icon>el-icon> // 需要修改为 el-icon>el-icon> 这里提一下，使用el-icon>包裹着，是官方的建议用法，特别是在某些element组件嵌套使用时，比如菜单，没有el-icon>包裹，可能样式会有错。...自定义图标 element-plus内置的图标有时候并不能完全满足我们的需求，我们还需要一些额外的自定义图标。...这个方法的优点很明显，就是比图标占用内存小，图标大小颜色可配置。

3.3K2 0

【Vue3+Vite+TS】2.0 组件一：伸缩菜单

el-icon>el-icon>... el-icon>el-icon>...el-icon-fold style="margin-right: 0.1rem" v-else /> /** * 头部图标...index="2"> el-icon>el-icon> 图标选择器 /** * 头部图标

1.2K3 0

大数据开发自学vue3踩坑实录：努力成为vue高高手

这里拿Element Plus的图标组件和font-awesome图标为例，如果我们想要使用图标，要做以下的定义：图标 -->el-icon :size="size" :color="color"> el-icon>图标组件。...图中表示HomeView组件要使用Element Plus的UserFilled组件，el-icon前缀是我们用于区分图标种类的。我们上面的样例中定义了Edit图标。...h('el-icon', { class: 'icon el-icon', style: iconStyle.value }, [h(resolveComponent

9473 2

vue3 + elemenplus实现导航栏

> el-icon>el-icon> el-icon size:number --> el-icon :size="25">...important; } 复制代码图标的使用因为图标也是遍历出来的，我试了好几种方式。如下这种方式是可以的。...将图标挂载到全局 main.ts 路由文件中添加在路由文件中添加 meta对象，存放图标。...这个HomeFilled对应着官方文档图标的名称渲染图标 el-icon>el-icon

11K2 1

【25年最新】Java大作业学生信息管理系统项目介绍

├── report/ │ └── stu/ ├── vite.config.js # Vite 配置文件 └── 学生管理系统.ico # 项目图标...-- 首页菜单 --> el-icon>el-icon> 首页 ...-- 班级管理菜单 --> el-icon>el-icon>...班级学生管理 el-icon>el-icon>班级管理... el-icon>el-icon>学生管理

6231 0

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》045-Element Plus基本组件示例

图标在后el-icon class="el-icon--right">el-icon> 图标在后el-icon class="el-icon--right">el-icon>图标在前和图标在后：展示了按钮文本和图标的位置。el-icon class="el-icon--right">el-icon> 展示了图标在按钮文本后面。...-- 使用图标类型的头像 --> el-icon>el-icon> 图标类型的头像 el-icon>el-icon> 这段代码使用了 el-icon 组件来渲染一个图标

6861 0

VueReact自动导入性能优化

/resolver'export default defineConfig({ plugins: [ AutoImport({ resolvers: [ // 自动导入图标组件...prefix: 'Icon', }), ], }), Components({ resolvers: [ // 自动注册图标组件...}), ], }), Icons({ autoInstall: true, }), ], })使用示例通过官方复制你要的icon name 替换到下面的图标名即可...两种方式：图标名/>el-icon>图标名/>el-icon> el-icon :size="150"...color="red">el-icon>整合scss安装依赖npm i -D sass 创建样式变量文件$btn-background:#6495ED;在vite

1.1K2 1

我的JavaWeb软件开发作品学生信息管理系统项目JavaWeb软件开发课程考察标准

5541 0

怎么在vue3项目中引入element-plus的Icon

Icons 全局组件**Object.keys(Icons).forEach(key => { app.component(key, Icons[key])})按需引用**（House ）名字引用是你要使用图标的名字...，导入是首字母大写**import { House } from '@element-plus/icons-vue'// 在vue文件使用 el-icon>el-icon>我正在参与

1.6K3 0

HarryData 专业的数据可视化组件库

自定义动画时长 --> <digital-flop :value="count" :duration="2000" /> StatCard 统计卡片，集成边框、图标...image-20251103114524654 Props 参数说明类型默认值 title 标题 string - value 数值 number 0 icon 图标组件 Component -...>el-icon> <stat-card title="今日销售额" :value="88888"...prefix="¥" variant="success" > el-icon>el-icon>...>el-icon> <!

3271 0

Vue3入门笔记四 ---- 实现公共头部样式

button本来应该是有用途的，但是与本笔记主体内容无关，所以去除了，只保留样式 --> el-icon...:size="20"> el-icon> ...首先是el-icon，这个是Element Plus中的图标组件，详细内容可以参考[图标](https://element-plus.gitee.io/zh-CN/component/icon.html...#%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8-svg-%E5%9B%BE%E6%A0%87)，想要解释的是，ElementPlus跟ElementUI在图标的引用上不一样

3641 0

从0到1搭建Spring Boot 开发脚手架之前端其他核心文件代码

assets/styles/global.scss' const app = createApp(App) // 注册Element Plus app.use(ElementPlus) // 注册所有图标...>el-icon>查询 ...el-icon>el-icon>重置 ...>el-icon>新增 el-icon>导出 <!

1471 0

9. CMDB前端开发(上)

// input里加图标必须单独按需导入... // input里加图标必须单独按需导入...-- el-icon>el-icon>--> el-icon>el-icon>--> el-icon>el-icon>--> <!

2K1 0

阿里图标库引入图标

文章引入比wordpress默认图表库的图标好看多的默认图标库的图标一般都是灰白色简直难看死了哈哈今天分享给大家如何插入阿里图标库的彩色图标阿里图标库有什么好处呢插入方便图标样式多彩色图标应有尽有...反正你用都用不完重点还永久免费使用引入方法第一步：阿里巴巴矢量图标库官网 —> Github或者新浪微博登录第二步：然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目...:(下面src=”这里是上面的JS代码，自行替换”) 使用图标...在已经添加到你项目中查找图标并复制图标代码，然后按照下面的格式替换href="#iconxxx"中的图标代码，将代码插入到你需要显示图标的地方！... 还是按照在导航菜单中添加图标为例：最后我们看看效果吧

3.6K3 0

通过el-tree自定义渲染网页版工作目录，实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求

读取本地目录的文件和文件结构，读取服务器文档目录数据供前端渲染的API实现-CSDN博客 ①效果（直接效果-左、鼠标悬浮显示完整名称的效果-右）： ②template代码其中el-icon...有个v-if判断，确定是文件夹就添加文件夹的图标，否则就是文件图标，这里有具体的需求可以写的更加丰富些。...@node-click="handleNodeClick" > el-icon...v-if="data.children && data.children.length > 0" ><Folder />el-icon>...el-icon v-else>el-icon> <el-tooltip class="item" effect

3850 0

点击加载更多

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

二次封装 el-icon

BuildAdmin03：为什么要定义图标组件

Vue3！ElementPlus！更加优雅的使用Icon

【Vue3+TypeScript】CRM系统项目搭建之 — 登录注册页【Tabs 选项卡的搭建以及 Tab 选项组件的插槽的使用】

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

【Vue3+Vite+TS】2.0 组件一：伸缩菜单

大数据开发自学vue3踩坑实录：努力成为vue高高手

vue3 + elemenplus实现导航栏

【25年最新】Java大作业学生信息管理系统项目介绍

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》045-Element Plus基本组件示例

VueReact自动导入性能优化

我的JavaWeb软件开发作品学生信息管理系统项目JavaWeb软件开发课程考察标准

怎么在vue3项目中引入element-plus的Icon

HarryData 专业的数据可视化组件库

Vue3入门笔记四 ---- 实现公共头部样式

从0到1搭建Spring Boot 开发脚手架之前端其他核心文件代码

9. CMDB前端开发(上)

阿里图标库引入图标

通过el-tree自定义渲染网页版工作目录，实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐