element中icon字体图标的使用

news/2024/3/29 8:02:18/文章来源:https://blog.csdn.net/m0_63040701/article/details/131733715

效果图

 官方提供的图标

 

icon字体图标

安装

安装依赖

cnpm install @element-plus/icons-vue

编写src/plugins/icons.js

import * as components from "@element-plus/icons-vue";export default {install: (app) => {for (const key in components) {const componentConfig = components[key];app.component(componentConfig.name, componentConfig);}},};

引入

修改main.js

import elementIcon from "./plugins/icons";app.use(elementIcon)  

el-icon常用属性

size:图标的大小【默认继承字体大小】

color:图标颜色【默认继承颜色】

使用

<el-icon size="80px" color="red"><ChromeFilled /></el-icon>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_331207.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PADS Logic怎么显示与隐藏元件的管脚编号和管脚名称

在绘制原理图元件的时候&#xff0c;有时管脚数量过多&#xff0c;管脚编号会显的特别密。既可以选择隐藏管脚编号&#xff0c;显示主要目的就是分辨出信号管脚。 第一步&#xff1a;在创建元件界面&#xff0c;执行菜单命令设置-显示颜色&#xff0c;如图1所示 图1 显示颜色选…

Next.js框架入门笔记

内置组件 ‘pages/_document.js’ 文件&#xff0c;自定义document DOC&#xff1a; https://www.nextjs.cn/docs/advanced-features/custom-document <Head>组件 <Head>是一个内置在 Next.js 中的 React 组件。它允许您修改页面的<head>。 Docs: https:/…

报错400是什么怎么解决呢?

首先要了解400错误是什么错误&#xff1a; HTTP状态码400表示"错误请求"。它是一种客户端错误状态码&#xff0c;表示服务器无法理解请求的语法或参数。当服务器收到一个无效的请求时&#xff0c;通常会返回400错误码。这可能是由于请求中缺少必要的参数、参数格式错…

关于AWS MSK Connector Execution Role的解释

尽管在创建AWS MSK Connector时&#xff0c;Execution Role是一个必填项&#xff0c;就像下面这样&#xff1a; 并且在官方文档中给出的Execution Role样例&#xff1a; https://docs.aws.amazon.com/msk/latest/developerguide/msk-connect-service-execution-role.html 中也…

linux X系统 X窗口系统(X Window System)

Xorg是一个开放源代码的跨平台的图形系统&#xff0c;它是UNIX和Linux的主要图形系统&#xff0c;它的前身是XFree86。 Xorg是在桌面环境中提供显示和图形输入设备支持的主要架构。 它支持多种输入设备&#xff0c;如键盘&#xff0c;鼠标&#xff0c;触摸屏&#xff0c;手写板…

电能管理系统在路店上的应用 安科瑞 许敏

摘要&#xff1a;随着企业改革的不断深入&#xff0c;对现代化用电管理的水平要求越来越高&#xff0c;准确、快速、经济的获得用电回路的各类数据进行用电分析、负荷管理、表计运行状况监测、电费自动结算的基础。同时也是提高企业经济效益的有效手段。近年来技术人员对监控系…

「解决方案」如何通过WiFi蓝牙二合一模块实现智能控制-工业控制

在物联网急速发展的现今&#xff0c;智能家居&#xff0c;智慧工业场景主流的智能控制方案多依赖于wifi技术&#xff0c;蓝牙技术来实现。而蓝牙-Wifi双模SOC方案&#xff0c;凭借集成wifi、蓝牙技术的低功耗、低成本&#xff0c;配网成功率高等特点&#xff0c;也在物联网智能…

24种人格力量,好奇心的力量以及特征分析

人格力量是一种可支配的价值观&#xff0c;它能让人向往美好的远景&#xff0c;极大地促进人的工作发展。via认为好奇心是人格力量的种类之一。 借助via 24种人格力量测试&#xff0c;探索人格优势&#xff0c;可以帮助我们更好的发现自身的优势&#xff0c;发挥自己的潜能。从…

REMB-接收端最大接收码率评估

draft-alvestrand-rmcat-remb-03 接收方带宽估计的RTCP消息 REMB_fanyamin的博客-CSDN博客 webrtc中的码率控制_webrtc设置码率_linux_vae的博客-CSDN博客 参考&#xff1a; Walter: WebRTC 拥塞控制之 REMB - 接收方带宽估计 - 简书 WebRTC基于TransportCC和Trendline Fil…

[java安全]URLDNS

文章目录 [java安全]URLDNS前言HashMapURLURLStreamHandler调用过程调用链流程图POC [java安全]URLDNS 前言 URLDNS利用链是一条很简单的链子&#xff0c;可以用来查看java反序列化是否存在反序列化漏洞&#xff0c;如果存在&#xff0c;就会触发dns查询请求 它有如下优点&a…

探索Python异常:让程序不再崩溃!

文章目录 前言什么是异常捕获异常基本语法捕获指定类型异常捕获多个指定类型的异常捕获异常描述信息捕获所有异常elsefinally 异常的嵌套自定义异常结语 前言 在编程的世界中&#xff0c;我们常常会面对各种各样的错误和异常情况。尤其当我们使用Python这样的高级编程语言时&a…

MySQL [环境配置]

MySQL [环境配置] MySQL的下载sqlyog的下载 熟悉老陈的人, 都清楚我不喜欢写这些环境配置的博客 那为啥这次要写一下MySQL的环境配置呢? 因为我被这一个小小的环境配置困扰了很长时间, 淋过雨的人都想为别人撑一把伞, 我不希望我的铁汁们也被这个问题困扰 MySQL的下载 MySQL下…

使用git克隆非自己账号的项目

在地址的中https://或者http://后添加要使用的 账号名项目地址&#xff0c;就会提示输入对应账号的密码&#xff0c;进行克隆。 如果克隆别人的项目&#xff0c;你将别人给你的项目地址克隆&#xff0c;此时身份验证是别人的用户名&#xff0c;这时你输入自己的密码就会验证失败…

在 3ds Max 中对二战球形炮塔进行建模

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 实际上被称为“斯佩里球炮塔”&#xff0c;它被用于二战的B-17和B-24轰炸机。 本教程介绍如何在 3ds Max 中对球形转塔进行建模。建模时&#xff0c;您将使用背景图片作为辅助。首先创建一个低多边形球体。…

thinkphp 上传图片

public function upload_img(){// 读取图片资源// 存储路径$path "uploads/avatar";$file request()->file(background_img);// 存储图片$info $file->rule(uniqid)->move($path);// 存储成功if ($info) {//获取到上传图片的路径名称$name_img $path . …

metersphere数据库SQL断言应用

在使用metersphere的时候&#xff0c;需要查询数据库数据来验证接口是否正常&#xff0c;在查看使用手册时&#xff0c;发现不是很明确&#xff0c;在研究一点时间后&#xff0c;终于明白&#xff0c;在此写下心得。 metersphere使用手册地址&#xff1a;接口测试 - 接口用例操…

界面控件DevExtreme v23.1新版亮点 - 全新的DateRangeBox组件

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序。从Angular和Reac&#xff0c…

语义分割混淆矩阵、 mIoU、mPA计算

一、操作 需要会调试代码的人自己改&#xff0c;小白直接运行会出错 这是我从自己的大文件里摘取的一部分代码&#xff0c;可以运行&#xff0c;只是要改的文件地址path比较多&#xff0c;遇到双引号“”的地址注意一下&#xff0c;不然地址不对容易出错 把 calculate.py和 u…

干货 | 一个漏洞利用工具仓库

0x00 Awesome-Exploit 一个漏洞证明/漏洞利用工具仓库 不定期更新 部分漏洞对应POC/EXP详情可参见以下仓库&#xff1a; https://github.com/Threekiii/Awesome-POC https://github.com/Threekiii/Vulhub-Reproduce 0x01 项目导航 ActiveMQ CVE-2015-5254 Apisix CVE-2…