This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

0 x00 profile

This article will in-depth analysis of the component Icon source code, analysis of its implementation principle, patience to read, I believe it will be helpful to you. Component Document Icon

Packages/icon/SRC/icon. Vue file is component source code to achieve. Making source icon. Vue

0x01 Component source code

The Icon component should have the simplest source code. Encapsulates the use of font ICONS. The attribute name is provided to specify the icon name to be used.

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

<script>
  export default {
    name: 'ElIcon'.props: {
      name: String}};</script>
Copy the code

is equivalent to < I class=” el-icon-iconname “>
, so there are two ways to use the icon function. The latter is the official recommendation, which is to use the font icon directly.

The latter is used directly in the Icon component example, without calling the el-icon component.

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

Most of the other component internal implementations that support icon functionality use font ICONS instead of calling the el-icon component, as shown in the following example.

// How to use ICONS
<el-button type="primary" icon="el-icon-search"< / el - > search button >// button source 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>
Copy the code

0x02 Font icon style

📁 SRC \ fonts

Use font files to store font ICONS.

Element-icons. TTF is a font file in TrueType format. The font format, which is common on Windows and Macs, is raw, so it’s not optimized for web pages. Elements-icons. woff is a Web Open Font file that is a compressed version of the Open TrueType/OpenType, and supports the separation of meta packets. The best format in Web fonts, specially optimized for Web pages.

📃 SRC \ icon SCSS

@font-face custom font library

SCSS First custom icon font library.

// The CSS @ rule specifies a custom font
@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;
}
Copy the code
  • font-family: Specifies the custom font name aselement-icons.
  • src: Sets the font load path and format[ <url> [ format( <string> ) ], using commas to separate multiple load paths and formats.
  • [ <url> [ format( <string> ) ]:urlSpecifies the path to the custom font.stringSpecifies the format of a custom font, primarily to help browsers identify it. variable$--font-pathA value offonts.
  • font-weight: Defines the font thickness. normalDefault values define standard characters.
  • font-style: Define font styles use italic, sloped, or normal fonts. normalDefault value normal font.
  • font-display: Decided on one@font-faceHow it’s presented under different download times and available times. variable$--font-displayA value ofauto, font display policy is defined by the user agent.

El element – icon – style

With the CSS selector, style elements whose class starts with el-icon- or contains el-icon-. Reference custom fonts with font-family: element-Icons! important; .

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

// ...

// margin: 0
.el-icon--right {
  margin-left: 5px;
}
.el-icon--left {
  margin-right: 5px;
} 
Copy the code

El-icon-iconname: Before icon setting

The display icon is added using the CSS pseudo-element selector ::before, and its content property is the corresponding icon code. Before matches a virtual element and is used primarily to add decorative content to the current element. The content displayed is its own content attribute, which defaults to inline elements.

// Icon content Settings
.el-icon-iconName:before {
  content: "\eXXX";
}

// ...
Copy the code

Mentioned about the build script/bin/iconInit. Js, parsing – chalk/SRC/packages/theme icon. The SCSS, extract all icon name generated examples/icon. The json icon set file.

// build\bin\iconInit.js
/ / traverse the nodes
nodes.forEach((node) = > {
  // ...
  // node gets the selector name match. El-icon-iconname :before
  var reg = new RegExp(/\.el-icon-([^:]+):before/);
  // ...
});
Copy the code

Import icon.json from examples\entry.js and mount it to vue.prototype. The Icon document page is used to generate all Icon collections.

Loding rotation implementation

Use the CSS animation to rotate the loading icon.

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

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

📃 lib \ icon SCSS

Gulpfile.js is used to compile SCSS files into CSS, which is compatible with the browser and compressed to generate packages\theme-chalk\lib\icon.css.

0x04 Schematic diagram

A picture depicts what happens when you use an icon.

<i class="el-icon-share"></i>/ / or<el-icon name="share"></el-icon>  
Copy the code

0 x05 📚 reference

“@font-face”,MDN

“::before”,MDN

“CSS selectors”,W3C