element-ui icon 组件源码分享

今日简单分享 element-ui 源码中的 icon 组件,主要从以下两个方面来分享:

一、源码中 icon 设计思想是什么呢?主要从页面结构、数据、 icon 样式三个方面来分享。

1.1 源码中 icon 组件的页面结构,可以在 package 目录下找到 icon 组件,如下图所示:

1.2 在这个 api 文档中可以找到 icon 的所有名字,具体目录如下:docs/zh-CN/icon.md

1.3 icon 的数据通过全局搜索 $icon 找到一个定义名字的 json 文件。

1.4 icon 的样式可以在这个目录中找到:/package/theme-chalk/src/icon.scss

1.5 icon 组件的使用

二、针对于源码的学习,应用到实际项目当中应该怎么去写呢?以下是我基于对源码的理解,输出一个简单 demo。

2.1 下面是 icon 组件的核心代码,重难点是怎么引入阿里矢量图字体库(下一篇文章分享哈),为了快速验证整体流程是否存在问题,本文当中懒省事,直接把 element-ui 源码中的字体库拷贝了过来,哈哈。组件结构如下 index.vue:

<template><i :class="`yss-icon-${name}`"></i>
</template><script>
export default {name: 'yssIcon',props: {name: String}
};
</script><style>
@font-face {font-family: 'element-icons';src: url('./fonts/element-icons.woff') format('woff'),url('./fonts/element-icons.ttf') format('truetype');font-weight: normal;font-display: auto;font-style: normal;
}* {font-family: 'element-icons' !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}.yss-icon-edit:before {content: '\e764';
}.yss-icon-delete:before {content: '\e6d7';
}.yss-icon-share:before {content: '\e793';
}
</style>

2.3 组件使用如下 demo.vue:

<template><div><yss-icon name="edit" /><yss-icon name="delete" /><yss-icon name="share" /></div>
</template><script>
import { YssIcon } from '@/yssComponentsUI/yssUI.js';export default {name: 'demo',components: {YssIcon}
};
</script>

2.4 页面效果如下:

总结:源码当中的 icon 组件使用的是字体,因此它拥有了字体一些属性,比如设置字体颜色,设置字体大小,设置字体是否加粗等等。字体的这些特性,使得 icon 组件有了更强的适应能力,兼容性、跨平台、及性能优化等优点,这是传统图片作为图标所不具备的。

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

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

相关文章

python爬虫实战——获取酷我音乐数据

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 开发环境: 版 本&#xff1a; python 3.8 编辑器&#xff1a;pycharm 2022.3.2 模块使用: requests >>> pip install requests 如何安装python第三方模块: win R 输入 cmd 点击确定, 输入安装命令 pip install…

k8s kubeadm部署安装详解

目录 kubeadm部署流程简述 环境准备 步骤简述 关闭 防火墙规则、selinux、swap交换 修改主机名 配置节点之间的主机名解析 调整内核参数 所有节点安装docker 安装依赖组件 配置Docker 所有节点安装kubeadm&#xff0c;kubelet和kubectl 定义kubernetes源并指定版本…

【Java】【SSE】【VUE】实现调用千帆大模型,实现打字效果

没有废话。只有演示、和源码地址 效果演示 源码地址 qianfan-sse-demo: 基于https://gitee.com/codinginn/chatgpg-sse-demo-springboot-vue改动

Vue入门基础语法概要

文章目录 一、Vue框架基础语法vue文件构成 二、脚手架执行流程三、vue组件四、css样式写法其他实例以及解释&#xff0c;随便写写 一、Vue框架基础语法 el挂载点data数据对象标签 V-text 纯文本V-html 解析htmlV-on&#xff08;可替换为&#xff09; 为元素绑定事件&#xff0…

QT SQL

QT SQL模块提供数据库编程的支持&#xff0c;支持多种常见的数据库&#xff1a;MySQL\Oracle\MS SQL Server\SQLite等。SQL模块包含多个类&#xff0c;可以实现&#xff1a;数据库连接、SQL语句执行、数据获取与界面显示 等功能。数据 与 界面间用Model\View架构。 一、 二、Q…

FullStack之Django(2)模型和后台

FullStack之Django(2)模型和后台 author: Once Day date:2022年2月13日/2024年1月31日 漫漫长路&#xff0c;才刚刚开始… 全系列文档请查看专栏: FullStack开发_Once_day的博客-CSDN博客Django开发_Once_day的博客-CSDN博客 参考文档: 编写你的第一个 Django 应用&#…

docker安装定制gocd-agent

一、定制gocd-agent FROM gocd/gocd-agent-alpine-3.12:v21.1.0 MAINTAINER xxx "xxx163.com" # 切换到 root 用户 USER root # 安装 expect、jdk、docker RUN apk update && apk add expect && apk add openjdk8 && apk add docker &&…

Vue3的 组件事件

目录 介绍 触发与监听事件 事件参数 声明触发的事件 事件校验 总结 介绍 Vue3是Vue框架的最新版本&#xff0c;其中对组件事件进行了一些改进和优化。组件事件是Vue中一种常用的通信机制&#xff0c;用于在组件之间传递数据或触发动作。 Vue3中的组件事件主要有两种类型…

Spring Bean 定义常见错误

Spring 的核心是围绕 Bean 进行的。不管是 Spring Boot 还是 Spring Cloud&#xff0c;只要名称中带有 Spring 关键字的技术都脱离不了 Bean&#xff0c;而要使用一个 Bean 少不了要先定义出来&#xff0c;所以定义一个 Bean 就变得格外重要了。 当然&#xff0c;对于这么重要…

IntelliJ IDEA for mac的自定义快捷键

//0. 打开配置项command , //1. 自动修复错误快捷键&#xff0c;根据不同的语境建议不同的操作&#xff0c;比如对象变量的创建&#xff0c;引入类等option 回车 //2. 用来添加添加构造器&#xff0c;setter and getter, override&#xff0c;toString&#xff0c;给光标所…

Three.js PBR 物理渲染

详解 Three.js PBR 物理渲染 Three.js 是一个流行的基于 WebGL 的 JavaScript 库&#xff0c;专门用于创建和运行三维动画和游戏。其中很关键的一部分是物理渲染&#xff08;PBR&#xff09;。本文将深入探讨 Three.js 的 PBR 渲染&#xff0c;并为初学者提供实用的指导。 什…

2024人工智能可以报考的证书有哪些

人工智能&#xff08;AI&#xff09;是致力于解决通常与人类智能相关联的认知性问题的计算机科学领域&#xff0c;这些问题包括学习、创造和图像识别等。 关键的人工智能技术有哪些&#xff1f; 深度学习神经网络构成了人工智能技术的核心。神经网络反映了人脑中发生的过程。大…

JOSEF约瑟 HRTH-Y-2H2D跳位合位 电源监视继电器 导轨安装

HRTH-Y-2H2D跳位合位 电源监视继电器&#xff1a; HRTH-Y-2H2D-X-T&#xff1b;HRTH-Y-2Z-X-T&#xff1b;HRTH-Y-2H-X-T&#xff1b; HRTH-J-2H2D-X-T&#xff1b;HRTH-J-2Z-X-T;HRTH-J -2H-X-T&#xff1b; HRTH-Y-2H2D&#xff1b;HRTH-Y-2Z&#xff1b;HRTH-Y-2H&#xff1…

遇到ubuntu设置交叉编译环境的问题

今天交叉编译器一直没安装成功&#xff0c;环境变量也配置了还是不对&#xff0c;最后发现Ubuntu是64位的要装 然后就好了 另外在进行嵌入式Linux开发的时候&#xff0c;要把主机、虚拟机、以及开发板设置在同一网段下&#xff0c;虚拟机一般设成临时的就可以&#xff0c;但是…

CS144--Chapter0--wsl2+docker环境搭建

我的笔记本配置 荣耀magicbook16&#xff0c;容量是500G&#xff0c;芯片是R7-5800 由于笔记本容量较小&#xff0c;因此考虑这个方案&#xff0c;对于台式机用户&#xff0c;建议可以直接用虚拟机或者双系统。 前言 斯坦福官网给出的方法是用他们的镜像&#xff08;基于Ubu…

Oracle分析SQL执行调优

-- 步骤一 执行分析 EXPLAIN PLAN FOR 需要分析的sql语句;-- 步骤二 查看结果SELECT * FROM TABLE(DBMS_XPLAN.DISPLAY);说明信息&#xff1a; ID&#xff08;Operation ID&#xff09;&#xff1a; 意义&#xff1a;操作的唯一标识符&#xff0c;用于指定执行计划中每个操作…

十进制转十六进制 C/C++蓝桥杯基础试题BASIC-10

问题描述 十六进制数是在程序设计时经常要使用到的一种整数的表示方式。它有0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F共16个符号&#xff0c;分别表示十进制数的0至15。十六进制的计数方法是满16进1&#xff0c;所以十进制数16在十六进制中是10&#xff0c;而十进制的17在十六进制中是…

抖音短视频矩阵营销系统源头独立开发搭建

开发背景 抖音短视频矩阵系统源码开发采用模块化设计&#xff0c;包括账号分析、营销活动、数据监控、自动化管理等功能。通过综合分析账号数据&#xff0c;快速发现账号的优势和不足&#xff0c;并提供全面的营销方案&#xff0c;以提高账号曝光率和粉丝数量。同时&#xff0c…

vue2 组件注册

简单分享怎么将组件注册为全局组件&#xff0c;主要分为三部分&#xff1a; 一、使用 Vue.install 方法将自义定的组件挂载到 Vue 实例上&#xff0c;如下&#xff1a; 二、注册为全局组件&#xff0c;如下&#xff1a; 三、页面使用&#xff0c;如下&#xff1a;

Oracle 12.2 暴力处理sysaux空间占满问题

基本环境 数据库&#xff1a;oracle 12.2 RAC 操作系统&#xff1a;unix&solaris 11.3 报错现像 今天处理别的问题查看告警日志偶然发现大量的报错&#xff0c;无法扩展SYSAUX表空间 于是登录系统&#xff0c;查看系统表空间使用情况&#xff0c;发现SYSAUX表空间用满了 …