background

Icon management is an important but easily neglected link in the process of transferring design draft to code.

Therefore, in the actual business code, the solution to icon problem is often too easy to use. For example, export files in PNG or SVG format, reference them directly as static resources in the project, or upload them to CDN as external chain reference. Obviously, there are some minor problems with each of these schemes:

  • In terms of user experience, this includes displaying blur on high resolution screen and adding extrahttpPage jitter caused by request and asynchronous loading;
  • In terms of development experience, including failure to passCSSControl styles to be consistent with text, difficult to reuse, update, etc.

In order to solve the above problems, it is a standard practice to convert the design icon to the IconFONT character set and import the font file into the project. For the start-up team, taobao’s free Iconfont website is undoubtedly a quick solution: upload icon — generate project — one-click download, very convenient. However, several issues prevent it from becoming an enterprise-level solution:

  • One is that there is no correlation between projects, the sameiconUnable to reuse and unified update;
  • One is that corporate accounts cannot be strongly bound and cannot be controlled during team collaboration and staff turnover.
  • The last one isiconThe copyright issue is free for all to use by anyone uploaded to the platformiconThat may not be what the company wants.

Therefore, the above solutions may solve problems quickly in the early stage of the project, but with the exponential growth of business complexity, the extension of development cycle and the change of project maintenance personnel, it may become the technical debt that cannot be maintained in the later stage, reducing development efficiency and affecting user experience. As an integral part of the construction of the material center, the IconFONT platform is an indispensable part of the technical system.

target

Icon, as a design specification and material resource, also has a strong need for team collaboration and version change. Just as mature R&D teams tend to deploy their own private GitLab service management code resources, building their own IconFONT platform should also be put on the agenda at the appropriate time to solve the above pain points.

We hope the Iconfont platform can:

  • Define roles’ responsibilities: UI contributionsicon; FE useicon
  • Authority Management system
  • Sustainable iteration, synchronization, and maintenance
  • iconUnified distribution and synchronous update
  • Fast access to use in projects

Technology selection

Since it costs a lot to build a fully functional IconFONT management platform from scratch, we decided to first investigate open source projects that support private deployment in the market and quickly implement the project through simple transformation. Directly to the conclusion: in fact, there are not many choices, Nicon and YIcon are easier to transform. Based on the following factors, we finally chose YIcon as the prototype:

  1. Nicon is a personal open source project, YIcon is an open source project of qunar team, with actual scenarios of enterprise applications;
  2. In terms of functions, YIcon has more perfect functions, including role permission management, etc.
  3. In terms of iterations and usage: YIcon has been iterated on more versions and used by more people;
  4. Technology stack: database Nicon usesMongoDBYIcon usesMySQL, more in line with the company’s technical planning direction.

YIcon architecture introduction

YIcon is a font icon management platform integrating icon upload, display and use, with strict review process, controllable project version and perfect permission management. The system’s iconfont uses Unicode encoding (although most encodings have a fixed role, Unicode sets aside a “private zone” for font extension. This zone’s code values range from: E000-f8ff), which holds about 6,400 ICONS, which is not profligate, but is more than enough for normal business needs.

On the technology stack, YIcon is built based on React + Koa + MySQL. The front-end, back-end and database both use mature technology stack, and the learning cost of source code is not too high.

The functions provided by YIcon are as follows:

To put it simply, the IconFont management platform is mainly UI and FE oriented and provides a workflow like this:

  • The UI is responsible for theiconUpload to the platform, through different “large library” to distinguish business lines, forming oneiconPool;
  • While FE is based on project needs, fromiconThe pool to pickiconGenerate the project, export the external chain, and introduce it into the project.

Therefore, the system architecture of iconFONT platform consists of the following parts:

  • Icon: For uploadedsvgFiles are processed in a unified manner and complete path information is saved
  • Large library: establish mapping relationship with icon, group, edit and update icon, mainly for UI
  • Project: Also establish mapping relationship with ICON, for FE, selecticonCreate projects, be responsible for generating external links, downloading ICONS, etc
  • User: Connects to the enterprise wechat scanning code login system and is responsible for role and permission management
  • Log: record icon upload, review, edit; Changes in personnel roles; Project updates and other log information, so that all operations of the system can be traced
  • Svg2ttf: parsingsvgPath, convert tottf woff eotAnd so on general font files, and package uploaded to the CDN

Project reform

Looking back at the expectations we listed earlier, we can say that YIcon meets our requirements to a large extent, and it’s time to revamp the unmet parts.

Login system

The original design of YIcon supports cas, SSO, and LDAP login modes, but does not support third-party login. This needs to be transformed into a unified login mode of enterprise wechat scanning code in the internal system of the rotation, and call the account system interface for permission processing, and automatically register roles and initialize permissions after login.

use

The original use of YIcon is similar to iconfont on Taobao. You need to click the “Download icon” button in the project, download a large number of font files to the local, copy them to the project, and then modify the following codes step by step:

  • Defined-generatedfont-face
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot? #iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
Copy the code
  • Define the useiconfontThe style of the
.iconfont{
  font-family: "iconfont" ! important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2 px.;
  -moz-osx-font-smoothing: grayscale;
}
Copy the code
  • Pick the appropriate icon and get the font encoding
<i class="iconfont">&#x33;</i>
Copy the code

It’s tedious and the user experience is poor. Taobao’s Iconfont has introduced a font class reference method to simplify this step, while YIcon does not support it. So we need to significantly reduce the cost of use — the preferred “download icon” is changed to “generate external chain” — this step will uniformly upload a large number of font files that need to be downloaded locally to the CDN, and generate a CSS file link, which can be introduced in the project.

@import url('https://s1.zhuanstatic.com/common/font/my-iconfont-1.0.3.css');
Copy the code

Then it works with the zz-UI component library right out of the box.

<z-icon class-prefix="my-iconfont" name="star" />
Copy the code

In addition, each change to the project generates an increasing version number, so using a strong caching strategy as a normal static resource is performance-friendly.

Functional modification

YIcon was last updated in 2017 and fell into disrepair. Frankly, the cost of the renovation work was much higher than expected, both in terms of unreasonable processes and bugs in the system, and the number of them exceeded our understanding of open source projects.

  • MySQLDatabase upgrade, statement optimization and specification
  • upgradesvg2ttfTo solve the problem caused by the low versionsvgParsing disorder
  • Process optimization (including upload, review, version change, role permissions and other linksbug)

The project to the ground

Although this part of the work is part of promoting the implementation of the project, the preliminary investigation is actually more important than the later promotion. To make a user-oriented product, we should first understand the pain points and needs of users. Only by poking the pain points and needs of users can we get the recognition of users and successfully land the project. Do technology to avoid “hi”, avoid being obsessed with cool technology and ignoring the appeal of users, which is also an important concept in the values around.

The early stage of the research

So we spent a lot of time in the early stages, researching and communicating with the UI team and the FE team to make sure the IconFont platform was exactly what they wanted.

This is actually the content of the first section of background introduction, just because I understand that both UI team and FE team have their own urgent demands for iconFONT platform, hoping that the design can be better restored, hoping that design resources can be better archived and iterated, hoping that there can be a more worry and effort saving system to work. And so on.

The late promotion

After the launch of the platform, we also promoted the UI team and FE team respectively to clarify the responsibilities of all parties so as to better cooperate with each other. The workflow is clear:

  • UI is responsible for unified managementiconResources –iconUpload to the platform, through different “large library” to distinguish business lines, formediconPool;
  • FE, on the other hand, only cares about its own project — picking from the pooliconGenerate the project, export the external chain, and introduce it into the project.

episode

In the process of connecting new workflow, there are some legacy issues.

For example, the UI did not need to convert SVG to iconFONT by itself, so it naturally did not consider the problems of path closure, shape merging or size specification during the design, leading to the problem that some ICONS could not be parsed after being uploaded to the platform. In the past, this was a headache for FE, which may lead to bickering, but now UI needs to sort out the historical ICONS and control the quality of icon by itself.

results

A final review of the IconFONT project shows that, despite some bumps in the road, it has generally achieved its intended goals. It has achieved remarkable results in improving the coordination efficiency of UI team and FE team, improving the maintainability of IconFONT resources and the user experience finally presented.

The iconFONT platform will further improve the experience in the future. For example, in the articles shared by taobao Iconfont team in the past two days, IconFONT supports a new color font icon, which is worth paying attention to and following up. Color will certainly make IconFONT have a broader application prospect.