3.4 Icon 图标

0x00 简介

本文将深入分析组件 Icon 源码，剖析其实现原理，耐心读完，相信会对您有所帮助。 组件文档 Icon

packages/icon/src/icon.vue 文件是组件源码实现。 github 源码 icon.vue

0x01 组件源码

组件 Icon 的源码应是最简单的。封装了字体图标的使用方法。提供了属性 name,用于指定使用的图标名称。

<template>
  <i :class="'el-icon-' + name"></i>
</template>

<script>
  export default {
    name: 'ElIcon',

    props: {
      name: String
    }
  };
</script>

组件使用 <el-icon name="iconName"></el-icon> 等同于 <i class="el-icon-iconName"></i>，所以使用图标功能有两种实现方式。官方更推荐后者也就是直接使用字体图标。

在 Icon组件示例中直接使用了后者,没有调用el-icon组件 。

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>

支持图标功能的其他组件内部实现大多使用字体图标方式，而不是调用el-icon组件,下面以图标按钮为例。

// 图标按钮 使用方式
<el-button type="primary" icon="el-icon-search">搜索</el-button>

// button 源码  packages\button\src\button.vue
<template>
  <button class="el-button" >
    ...
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    ...
  </button>
</template>

0x02 字体图标样式

📁 src\fonts

用于存放字体图标使用字体文件。

element-icons.ttf 是 TrueType 格式的字体文件。 Windows 和 Mac 上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。 element-icons.woff 是 Web Open Font 的字体文件是一个开放的 TrueType/OpenType 的压缩版，同时支持元数据包的分离。 Web 字体中最佳格式,针对网页进行特殊优化。

📃 src\icon.scss

@font-face 自定义字体库

组件样式源码 packages\theme-chalk\src\icon.scss 首先自定义图标字体库。

// CSS @规则 指定自定义字体
@font-face {
  font-family: "element-icons";
  src: url("#{$--font-path}/element-icons.woff") format("woff"), /* chrome, firefox */
      url("#{$--font-path}/element-icons.ttf") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-display: $--font-display;
  font-style: normal;
}

• font-family： 指定自定义字库名称为 element-icons。

• src：设置字体的加载路径和格式 [ <url> [ format( <string> ) ]，通过逗号分隔多个加载路径和格式。

• [ <url> [ format( <string> ) ]： url指定自定义的字体的存放路径 ；string指定自定义的字体的格式，主要用来帮助浏览器识别。 变量$--font-path值为 fonts。

• font-weight： 定义字体的粗细。normal 默认值定义标准的字符。

• font-style： 定义字体样式使用斜体、倾斜或正常字体。normal 默认值正常字体。

• font-display：决定了一个@font-face 在不同的下载时间和可用时间下是如何展示的。变量 $--font-display 值为auto,字体显示策略由用户代理定义。

el-icon-element 样式

通过 CSS 选择器，对class以el-icon-开始 或者 包含el-icon-的元素设置样式。通过font-family引用自定义字体font-family: element-icons !important;。

[class*=" el-icon-"],
[class^="el-icon-"] {
  font-family: element-icons !important;
  // ...
}

// ...

// margin 左右设置
.el-icon--right {
  margin-left: 5px;
}
.el-icon--left {
  margin-right: 5px;
}

el-icon-iconName:before 图标设置

显示图标使用 CSS 伪元素选择器::before进行添加，自身的content属性是对应的图标代码。 ::before 匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。显示的内容是其自身的content属性，默认是内联元素。

// 图标内容设置
.el-icon-iconName:before {
  content: "\eXXX";
}

// ...

前文讲到脚本 build/bin/iconInit.js ，解析 packages/theme-chalk/src/icon.scss，提取所有 icon 名字生成 examples/icon.json 图标集合文件。

// build\bin\iconInit.js
// 遍历 nodes
nodes.forEach((node) => {
  // ...
  // node获取选择器名称匹配 .el-icon-iconName:before
  var reg = new RegExp(/\.el-icon-([^:]+):before/);
  // ...
});

icon.json 在官网入口文件examples\entry.js 中导入，挂载到 Vue.prototype。 用于Icon图标文档页生成所有的图标集合 。

image.png

loding 旋转实现

使用 css animation 实现 loading 图标不停旋转效果。

.el-icon-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

📃 lib\icon.scss

前文可知使用 gulpfile.js编译 scss 文件转换为CSS,经过浏览器兼容、格式压缩，最后生成 packages\theme-chalk\lib\icon.css。

image.png

0x04 原理图解

一图描述下使用图标时，发生了什么。

<i class="el-icon-share"></i>
// 或
<el-icon name="share"></el-icon>

image.png

0x05 📚 参考

"@font-face",MDN "::before",MDN "CSS selectors",W3C