Introduction to the xmlplus component (1) ICON)

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the introduction of the JavaScript framework (xmlplus) component (I) ICON, which has some reference value, if you are interested, refer to xmlplus as a JavaScript framework for fast development of frontend and backend projects. This article mainly introduces the introduction of the JavaScript framework (xmlplus) component (I) ICON, which has some reference value. If you are interested, you can refer to it.

There are three types of icons used on the webpage: file icon, font icon, and SVG icon. The file icons are described in PNG format only.

PNG icon

You can reference a PNG icon in either of the following ways. One is directly given by the src attribute of the HTML element img. The following is a simple example.

Icon: {    css: "#icon { width: 68px; height: 68px; }",    xml: "",    fun: function (sys, items, opts) {        this.attr("src", this + ".png");    }}

Assuming that the icon file and component file are in the same directory, You can reference the required icons in the following way. Note that the component Icon skillfully associates the id attribute value with the image file name, so that you do not need to create additional attributes.

Example: {    css: "#example > * { padding: 10px; background: #F9F9F9; }",    xml: "
\            
  
   \            
   
    \            
    
     \          
    
   
  
"}

Another way to reference the PNG icon is to add the corresponding objectbackground-imageStyle, and the path of the icon is given in the style. The following is a simple example.

Icon: {    css: "#icon { width: 68px; height: 68px; }",    xml: "
",    fun: function (sys, items, opts) {        this.css("background-image", this + ".png");    }}

This form is similar to the icon given by the img label. The difference is that the former dynamically specifies the src value of the img tag, while the latter dynamically specifies the css style of the p element. This component is exactly the same as the Icon component used previously.

The component icons shown above use discrete Icon files. In practice, a PNG file containing many icons is usually provided. In this case, how do I build the icon component? Please refer to a more practical solution provided below.

Icon: {    css: "#msg { background-position:  0 0; }\          #home { background-position: -48px 0; }\          #contact { background-position: -96px 0; }\          #icon { width: 68px; height: 68px; background-image: url(icons.png); }",    xml: "
",    fun: function (sys, items, opts) {        sys.icon.addClass("#" + this);    }}

This component is in the style itemcssThe path of the icon file and the position of various icons in the file are provided. And the icon instance id corresponds to the corresponding icon class name. Of course, the usage of the component is the same as that of the previous component.

The following is another component design scheme, which moves the location information to the function item. This solution is feasible, but the component execution efficiency is not as high as that of the former. Each time the component is instantiated, location information is generated once. For the former, because style items are generated only once during component instantiation, the execution performance of the component is guaranteed.

Icon: {    css: "#icon { width: 48px; height: 48px; background-image: url(icons.png); }",    xml: "
",    fun: function (sys, items, opts) {        var positions = {            "msg": "0 0",            "home": "-48px 0",            "contact": "-96px 0"        }        sys.icon.css("background-position", positions[this]);    }}

Font icon

Font icons are used like text by introducing a font file containing icons. Compared with the PNG icon, the most important aspect is its vector. There are two ways to reference font icons: Class Name Reference and unicode reference.

Reference by Class Name

This type of icon content is defined in style items, and HTML elements are associated by class names.

Msg: {    css: "#msg { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }\          #msg:before { content: '\\e608'; }",    xml: "
"}

Reference unicode directly

This reference method is essentially no different from the previous one. It only transfers the icon content from the style item to the view item.

Home: {    css: "#home { font-size: 48px; width: 68px; height: 68px; line-height: 48px; }",    xml: "

"}

The following example shows two different ways to reference font icons. Note: This example simplifies the compatibility-related content in the style item. For more information, see the source code.

Example: {    css: "@font-face { font-family: 'iconfont'; url('iconfont.ttf') format('truetype');}\          #msg, #home { font-family: 'iconfont'; font-style:normal; }\          #example > * { display: inline-block; padding: 10px; background: #F9F9F9; }",    xml: "
\            
  
   \            
   
    \          
   
  
"}

SVG icon

Finally, let's take a look at our highlights, how to encapsulate and use the SVG icon. In xmlplus, the SVG icon is a recommended icon format. It allows direct code embedding without reference to related files.

Pass xlink:hrefReference

In this way, you first need an svg icon set, which contains the following content.

     
          
   
    
   \
      
  
 

There are two ways to exist the svg icon set. One is to exist as a file.xlink:hrefThe property value must specify the File url. The following is an example.

    
  
   \
  
 

Another form is that the icon set directly exists in the page. This method is called intra-page reference. It does not need to specify the url, as long as the id of the corresponding symbol is specified.

    
  
   \
  
 

Direct encapsulation of svg icons

Comparedxlink:hrefUsing xmlplus componentization technology to directly encapsulate icons is a better way. See the following SVG icon component.

Icon: {    xml: "
 
  \            
  
   
  \          
 ",    fun: function (sys, items, opts) {        this.attr("fill", '' + this);    }}

This is a hook icon. a widget contains only view items and function items. According to the function item content, the icon color is given by the id attribute value of the component instance. Next let's take a look at how to use this icon.

Example: {    css: "#example > * { padding: 10px; background: #F9F9F9; }\          #example > *:hover { fill: #fff; background: #563d7c; }",    xml: "
\            
  
   \            
   
    \            
    
     \          
    
   
  
",    fun: function (sys, items, opts) {        sys.example.on("click", "*", e => console.log(this + " clicked"));    }}

This example shows three icons of different colors, listens to the icon Click Event, opens the browser console, and when you click different icons, you can see the corresponding output.

In addition, there is a common SVG icon encapsulation method, which gives SVG text URL-encoded directly in the src attribute or style background-image of img. As shown in the following figure.

Icon: {    css: "#icon {width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...")},    xml: "
"}

Compared with the previous method, this method has two disadvantages: First, you cannot see the source file of SVG. Second, you lose the permission to operate on the SVG icon. Of course, this method is not useless. This method is acceptable if you do not need to perform subsequent operations on the icon. In addition, similar icons are used in base64-encoded inline references. The following is a simple example:

Icon: {    xml: ""}

This method is similar to the encapsulation method of the previous SVG icon. However, compared with the direct encapsulation of SVG icon components, you also lose the operation right on the icons.

The above is the introduction of the JavaScript framework (xmlplus) component (1) The details of the ICON. For more information, see other related articles in the first PHP community!