This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

👋 preface

  • The user is God, and to look at components from god’s point of view is to look at components from the user’s point of view.
  • I’ve used a lot of good onesUILibrary, with the time zizi, when it is their turn to build a component library will often go to reference others’ source code.
  • After reading the source code suddenly oh! I could have written it this way, but it’s hard not to wonder how someone came up with this solution. 🤳
  • This series of articles is mainly aimed at students who do not understand or have doubts, so it is relatively basic. Let us stand in the perspective of the user to think about the structure, and see if there is a change in the way to write code.

About Icon Component

🙇 Why do we use Icon

👨💼 as the user

  • As a simple example, if one button is patterned and brightly colored, and the other button is just a flat square, which one looks more comfortable?
  • A page should not only consist of images and text, but also a variety oficonIt’s a combination.

👨💻 as the component library consumer

  • We can see that there are many component librariesIcon, believe that the first component of every component library should beIcon.
  • When we put the component libraryIconWhat do we want the component to look like on our page?
    • A nice icon that represents the style of the component library.
    • You can add a class name to use.
    • There are enough ICONS to choose from.

Building components

Next may use as little code as possible to match element’s source code for structure description, with element Icon source code to eat more delicious oh

Prepare icon

  • To design one like the one aboveIconIt’s pretty simple, we just need to import all of our icon styles, some of which might besvgSome are retrieved by pseudo-classes.
  • All told, there’s only one3A point
    • First of all, we need to prepare a set of ICONS, which can be designed by our own designers or found online.
    • Give these ICONS a uniform prefix and a different suffix name.
    • iniconComponents are rendered with different icon names.
  • We can use iconfont library to select ICONS that designers have already designed.

  • You can choose one by one or you can use a whole set of ready-made ICONS, so I’m going to use a whole set of ready-made ICONS.
  • First enter a set of icon selection page, you can see that he only one add shopping cart, we can openf12Enter this code.
var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
     console.log(span[i].querySelector('span').click());
}
Copy the code

  • And you can see we chose this180Click on the add to item icon to enter the shopping cart.

  • So we can set the prefix name for all of these, so let’s go to Project Settings and give them a prefix name.

  • When we’re done, we’ll download all the ICONS locally.

Resources to introduce

  • There’s going to be a lot of files that we just downloaded and we’re only going to use these four.

  • Introduce it in your own projecticonfont.css, remembericonfont.cssSet the relative path to the icon at the beginning of the reference. Each person’s project varies from person to person.
@font-face {
  font-family: "iconfont"; /* Project id 2692054 */
  src: url('fonts/iconfont.woff2') format('woff2'),
       url('fonts/iconfont.woff') format('woff'),
       url('fonts/iconfont.ttf') format('truetype');
  font-weight: normal;
  font-display: auto;
  font-style: normal;
}
Copy the code
  • In fact, we can simply add this class name to the project, he will find the corresponding class name to retrievePseudo elementsFor more detailsElement style

More demand

  • Such aiconThe component is ready, as long as we find the appropriate icon by looking at the style.
  • Of course,elementtheIconIndividual ICONS are also animated, like this oneloadingIcon.

  • It’s just a looping animation for the class name.
.el-icon-loading {
  animation: rotating 2s linear infinite;
}
Copy the code
  • Well this component structure is shared here, more implementation can refer to the portal for learning ~

👋 is at the end

  • On the wholeIconThe component has little to do with any other component, except to introduce the icon library.
  • I am also slowly groping for the building of the component library. What I say is my own sharing, so it may be more basic for the big guy, but I believe that my continuous output can help some students who have doubts.
  • If you feel this article is helpful to your words might as well 🍉 attention + like + favorites + comments + forward 🍉 support yo ~~😛

🌅 past wonderful

“From God’s Point of view” talk about Element components -Radio

“In God’s eyes” talk about the Element component structure-rate

“In God’s Eyes” talk about the Element component structure -Switch

Talk about Element Input from God’s point of view

Talk about the Element component structure — InputNumber — in God’s eyes