Thoughts triggered by processing of yellow diamond level icons

Recently, when I was dealing with the Qzone yellow diamond icon update, I remembered some of the problems I encountered in optimizing business icons recently. I gathered my thoughts and discussed them with everyone. We welcome all opinions.

In actual work, icon classes are widely used, and array-like hierarchical icons show their particularity. The following two directions will be discussed together, how to implement it and how to better implement it and apply it closer to the actual project.

Assumption: There are 10 user levels in the business, plus icons of two visual sizes, large and small, as well as the performance of "expired and non-renewed users", a total of 38 icons need to be stored in the database for calling (as shown below).

In the development of the CSS framework of the project, there will be several keys to consider: number of requests, code volume, compatibility, image file size, whether it can be combined into component modules and facilitate logical implementation.

1. Whether icons of many different levels will generate too many file requests when they are widely used in different ways;
2. Whether the code for level icons uses too much code in implementation, and only a small amount of code is actually applied on the page, resulting in bloated code;
3. (x) When the icon output by html+css is applied to the page, whether it is compatible with other elements on the page, otherwise a series of codes will be added to achieve the compatibility goal;
4. If the icons are merged, weigh the actual situation of the project application and see whether the image file will be too large and consume bandwidth;
5. The HTML of the icon is fixed, and a certain number in the className is used as a variable. The performance effect is achieved by modifying the variable.

Source: Tencent Webteam