Xmlplus Component Design Series icons (ICON) (1), xmlplusicon

Xmlplus Component Design Series icons (ICON) (1), xmlplusicon

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: "
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: "<div id='example' class='bs-example'>\      <Icon id='msg'/>\      <Icon id='home'/>\      <Icon id='contact'/>\     </div>"}
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: "<div id='icon'/>",  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 div 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: "<div id='icon'/>",  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: "<div id='icon'/>",  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: "<div id='msg'/>"}
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: "<div id='home'><div/>"}
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: "<div id='example'>\      <Msg id='msg'/>\      <Home id='home'/>\     </div>"}
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.
Reference using xlink: href
In this way, you first need an svg icon set, which contains the following content.
<Svg> <symbol id = "icon" width = '48px 'height = '48px 'viewbox = '0 0 24 24 '> <g> <polygon points = '9, 16.2 4.8, 12 3.4, 13.4 19.6, 5.6, '/> </g> \ </symbol> <! -- You can also have more symbol --> </svg>
The svg icon set can exist in two ways. One is in the form of a file. In this case, the xlink: href attribute value must specify the File url. The following is an example.
<svg>  <use xlink:href='http://example.com/file.svg#icon'/>\</svg>
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.
<svg>  <use xlink:href='#icon'/>\</svg>
Direct encapsulation of svg icons
Compared to referencing the icon through xlink: href, using xmlplus componentization technology to directly encapsulate it is a better way. See the following SVG icon component.
Icon: {  xml: "<svg width='48px' height='48px' viewBox='0 0 24 24'>\      <g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\     </svg>",  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: "<div id='example'>\      <Icon id='red'/>\      <Icon id='green'/>\      <Icon id='blue'/>\     </div>",  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: "<div id='icon'/>"}
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.
This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.