Small program natively providedIcon component

attribute
attribute type The default value mandatory instructions
type string is Icon type, valid values: SUCCESS, Success_no_circle, INFO, WARN, waiting, cancel, Download, search, clear
size number/string 23 no The size of the icon
color string no Icon color, same as CSS color
instructions
The unit of length for the component size property is px by default.2.4.0Support for passing units (RPX /px)
  1. The PX value type is used by default. Do not write any units, just write a value
  2. RPX (Responsive Pixel) screen adaptive units, he divided the screen into 750 units, each unit is 1/750.

For example: the iphone6 screen is 350px wide, and each RPX is 0.5px. So if we set size to 60rpx on the iphone6, it will have the same effect as setting size to 30 or 30px.

The component color property changes the color of all the pixels of the icon

Q&A

Can ICONS and text be placed on the same line?

Yes, ICONS themselves were created for better layout and ease of use. The code is as follows:

<view style="font-size: 17px; margin-top: 20px;">I'm a line of text,<icon type="success" size="15"></icon>I have ICONS in it!</view>
Copy the code
Sometimes the Icon on the real phone is blank

First of all this problem is definitely not due to font file links not being added to the security domain of the applet, WXSS loads images and fonts to allow outfields! If the icon is a custom implementation, check the model and the embedded font file type. It may be caused by compatibility. TTF and WOFF fonts are recommended for small programs. If you use these two fonts, the same situation still exists, and you can consider embedding data in SVG instead.

Weui component library icon component icon how to take out, save in the local?

You can directly open the WeUI official website, and then view the source code through the browser developer tools, find the resource address and download. Or download it from the official wechat document.

advantages

Out of the box.

disadvantages

Support for success, Success_NO_circle, INFO, WARN, waiting, Cancel, Download, search, and clear is far from satisfying development requirements.

Custom implementation icon

Use images directly

advantages

Simple and crude, each icon corresponds to a picture.

disadvantages
  1. Images are not easily laid out in text. It’s not easy to change the color.
  2. The image cannot be scaled up or down, and will become empty and jagged when enlarged.
  3. Images need to be stored locally or over the network, which can result in a large number of HTTP requests and slow page loading.
  4. It’s not as convenient to use as an icon with a single name.

Using sprites

Sprite, a continuous photo collection, arranges a single image in a non-overlapping, minimally-distributed manner. Each time using through the vertical and horizontal display of the starting coordinates and area size, in order to achieve dynamic switching effect.

Use the sample

Through the Sprite map to achieve an explosion effect. The image size is (650×650) px; So each small icon is (130×130) px; This is why the CSS style is set to 130px width and height, and why the JS code moves step to 130. Js left and top are both negative. This is because instead of showing the coordinates of the icon, it shows the distance to the upper left of the background image.

Note: only network images can be used in WXSS, not local images!

The code is as follows:

<! --icon.wxml-->
<view>
<icon class="sprite scale" style="background-position: {{left}} {{top}};"></icon>
</view>
Copy the code
/* icon.wxss */
.sprite{
    display: block;
    width: 130px;
    height: 130px;
    background: url("https://i.loli.net/2021/11/15/7BH5gdkbLynrfM3.png") no-repeat;
}
.scale{
    transform-origin: 0 0 0;
    transform: scale(2.2);
}
Copy the code
// icon.js
Page({

    /** * initial data for the page */
    data: {
        left:'0px'.top:'0px',},/** * lifecycle function -- listens for page loading */
    onLoad: function () {
        var that = this;
        var left = 0;
        var top = 0;
        const step = 130;
        const stop = (650-130);
        var i = setInterval(function() {
             if (left >= stop && top >=stop) {
                  clearInterval(i)
             } else {
                left += step;
                if(left >= 650){
                    left = 0;
                    top += step;
                }
                that.setData({
                    left: The '-' + left +'px'.top: The '-' + top +'px'})}},100)}})Copy the code
advantages
  1. At load time, it only loads once. Reduced HTTP requests.

Draw using CSS styles

Use the sample
<view>
    <icon class="icon-close"></icon>
</view>
Copy the code
.icon-close{
    display: inline-block;
    width: 17px;
    height: 2px;
    background: red;
    transform: rotate(45deg);
}
.icon-close::after {
    content: ' ';
    display: block;
    width: 17px;
    height: 2px;
    background: red;
    transform: rotate(-90deg);
}
Copy the code
disadvantages
  1. Each icon requires CSS style code, which is a lot of labor.
  2. This type of icon is not a character, and each icon should have a unified center point when drawing, otherwise it will be troublesome to use to control the position.
  3. Size and color are also difficult to control. So this is not a good icon scheme.

Use vector fonts (recommended)

When the browser renders a character, it first looks at the font-family style to determine which font name to use. The Unicode for that character is then searched for the corresponding character information in the font file.

Font type has two kinds, one is dot matrix font, one is vector font. The most widely used fonts are vector fonts. Vector fonts can be divided into three types: Type1 led by Adobe, TrueType led by Apple and Microsoft, and OpenType, an open source font led by Adobe, Apple and Microsoft.

In vector fonts each Unicode is just an index of each character, and each character description is a geometric vector drawing description. Type1, for example, uses cubic bezier curves to draw glyphs. TrueType uses quadratic Bezier curves to describe glyphs. Because vector fonts are drawn, they can be filled with any color in real time, and can be zoomed in infinity without zigzag.

Alibaba icon website, we can search for any picture online editing on this website, and download the style file, use in the small program.

Font Source:

  1. EOT is an OpenType font type dedicated to Microsoft Internet Explorer.
  2. TTF is a TrueType font.
  3. WOFF and WOFF2 are vector font formats for mobile development. It is a reencapsulation of three vector font formats.

Linking to various font file sources is compatible with different browser hosting environments. The browser will choose the format it supports and try to load it from the first one in the list. Once one is available, the rest of the font formats are not loaded. Small program inside the recommended use of TTF and WOFF these two formats. WOFF2 has incompatibility issues on earlier versions of IOS devices.

You can refer to the usage exampleThis article

Use SVG vector files

Many drawing software can export SVG vector files, such as Sketch, but the exported SVG vector files have useless spam. You can download a vector file in SVG format from Alibaba’s icon site after editing it, and it doesn’t carry any junk information. We then take this file and find an Image2base64 tool that converts the file contents into base64 strings. You can then use the base64 string as the image source in the applet to implement custom ICONS.

The sample
  1. Preparing SVG images

  1. Use online Image2base64 to convert images to:

    data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgI mh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld 0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsa W5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L 3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0a D48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48c GF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+P HBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiI HAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwL WlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yI DUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+Copy the code
    1. Write the code
    .svg-icon{
    display: block;
    width: 200px;
    height: 200px;  
    background-repeat: no-repeat;
    background: url("data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgI mh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld 0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsa W5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L 3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0a D48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48c GF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+P HBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiI HAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwL WlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yI DUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+");
}

Copy the code
    <view>
    <icon class="svg-icon"></icon>
</view>
Copy the code
    instructions

    This method still requires an image to be processed once and then referenced on the page. Note: The values of the width and height attributes in the style file need to be the same as those of the downloaded SVG file (as can be seen in the SVG tag).

Draw SVG using Canvas

This is fine for animation, but a bit overkill for ICONS. Tencent’s Cax engine that draws SVG into images