At present, in the development environment, the IconFONT is used relatively more in the Web terminal, but for various reasons, the iconfont is rarely used in the mobile terminal. But because of its many advantages, many corporate teams have always retained iconfont icon scheme; This article will explore the feasibility of using icon fonts instead of SVG/nX and how they compare.

In fact, I think of this topic, is the company recently carried out a package volume optimization project, one of the optimization is for icon resources. Recently, I noticed that Iconfont already supports colored icon fonts. I used a Demo to make a comparison, and found that the font package containing dozens of ICONS is smaller than the size of an SVG icon resource, so I explored the Iconfont scheme.

One, foreword

ICONS play an important role in almost every website and application on the Internet, and there has been a battle over icon sets ever since their appearance.

In the past, developers had to rely on image formats to meet their needs. However, using images as ICONS is very poor in terms of rendering quality and resolution. Developers now have two choices: icon fonts and SVG ICONS (scalable vector graphics).

And who is the best choice between the two? The development community has long debated the merits of one over the other. In recent years, however, there has been a general fondness for the SVG icon format. SVG ICONS ensure better performance, higher accessibility standards, high rendering quality, unparalleled flexibility, and extensive customization.

But? Is iconfont really not a good choice? The answer is definitely no! In a sense, it is even more advantageous.

The current winner: SVG ICONS

Let’s take a look at the current state of SVG icon use and its limitations.

The status quo

IOS: First of all, using SVG is relatively difficult for iOS, usually with third-party library solutions. Although there is also a supported scheme (Symbol Image) officially provided, the whole process is quite complicated (from icon making to development), and the version support is not very friendly. So most iOS development is still 2x/3x/.. The scheme.

Android: Android platform for SVG support, currently relatively mature, from the import tool (AS resource directory right-click > new > Vector Asset to convert SVG into Vector resources), to the development of use, to the final effect is relatively complete. See the official tutorial: “Add Multi-density Vector Graphics”

At the same time, you can customize the icon size you need, and when packaging, SVG will automatically generate PNG images of the corresponding size.

defaultConfig {
    ...
    
    //  minSdkVersion 19 (5.0)
    vectorDrawables.generatedDensities('xhdpi'.'xxhdpi'.'xxxhdpi')
    // minSdkVersion > 19
    // vectorDrawables.useSupportLibrary = true
}
Copy the code

Here is the default packaging (minSdk = 19) :

As you can see from the figure above, an SVG icon takes up much more than just a vector resource file.

insufficient

The specific usage is not explained here. Here are just a few things to be aware of when using SVG ICONS. First of all, SVG ICONS can be divided into color ICONS and monochromatic ICONS. For colored ICONS, it is not recommended to have gradient designs in the ICONS, which may cause unexpected problems. Used in layout files, monochrome ICONS can be changed by using shader app:tint=”@android:color/white”.

Dynamically changing SVG colors

varvectorDrawableCompat = VectorDrawableCompat.create(resources, R.drawable.ic_mysql, theme) vectorDrawableCompat? .setTint(resources.getColor(android.R.color.black)) ivIcon.setImageDrawable(vectorDrawableCompat)Copy the code

You can change the color of an SVG icon dynamically with the above code, but when using the same icon resource in other scenarios. You will find that the icon color will be the same as the color you dynamically set earlier.

This is because the icon resource is loaded into memory when used. When a resource is modified, it is actually a resource that modifies memory. The resource memory is not overwritten or reclaimed at this time. When used again, the state of our last modification is preserved.

Three, potential contestants: iconfont

Before we begin, summarize the pros and cons of iconfont. Advantages:

  • Can be used in a variety of resolutions, zoom is not blurred, say goodbye to iOS 2X / 3X and future NX problems;
  • A set of resources can be used on the Web, iOS, Android and other platforms, unified display and use methods;
  • Reduce file size to a certain extent;
  • Through the font color value set transformation, to achieve one-key skin, one-key replacement icon overall color, image reuse;
  • You can add visual effects such as shadows, rotations and transparency
  • Post maintenance costs are low

Disadvantages:

  • The cost of making ICONS is high
  • The cost of updating is high and it is best to maintain it in a more standard project manner
  • Inaccurate positioning in development (the reason for text display itself)

For iconfont, there are many advantages, but the disadvantages mainly focus on the production cost, and the need for a good maintenance of the project icon, because each update is an update to the entire iconfont set. It is recommended to maintain the whole project icon with the help of project management similar to alibaba icon library. You can also convert iconFONT online using SVG.

use

Iconfont use actually very simple, which neither side (Android | iOS | Web) are displayed directly by means of text, it is important to note: text needs to be set to the corresponding character ICONS; Set the font for the displayed text to your iconfont font. Specific use process, here no longer detailed explanation, we should also have been contacted, not please search tutorial by yourself.

When downloading the ICONS in the project to the local through iconfont. Cn, it is usually a compressed package, which stores the generated font files, the web page files corresponding to the characters of the ICONS, and the iconfont. Json files corresponding to the icon names and characters.

The diagram below:

In the development, all the characters corresponding to ICONS in iconfont will be listed as text resources (strings.xml) for convenience. At the same time, if there is an icon missing in each update of the font file, it can also be easily found.

I wrote a JAR script to convert all icon characters contained in the font into text resources needed for development by reading iconfont. Json file in the downloaded font compression package.

Iconfont2strings. Jar download address: img.shedoor.net/blog/iconfo…

Color iconfont

One of the biggest limitations of iconFont has been that ICONS are monochrome only. This has now been broken with iconfont.cn, which supports color fonts without making any difference to monochrome iconfont usage. The only thing to note is that the project needs to be set up to support color font format before downloading, as shown below:

A more detailed explanation of the color iconfont can be found in “Iconfont supports new color font ICONS.”

The test results

I wrote a small Demo and briefly tested it. By setting the text size and font color (for monochrome), I can change the icon, which is really not comparable to other icon schemes. The following information is displayed:

Color iconfont

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    android:fontFamily="@font/iconfont_color"
    android:text="@string/icon_color_chick"
    android:textColor="@android:color/white"
    android:textSize="30dp" />
Copy the code

Note the code above, for color iconfont development there is a point to note:

  • Font cannot be changed by setting its color;
  • However, you still need to set a font color for it (any color is ok). If you do not set it, the color will be lighter.

Iv. Summary of the plan

The biggest advantage of iconfont scheme is reflected in: it can be used in all ends of the icon unified; On the other hand, package volume can be effectively optimized to a certain extent.

Here is a specific implementation summary in use:

  1. Through similar iconfont.cn platform project management icon management;
  2. For ICONS of each version, it is recommended to replace the entire font file and corresponding character resource file in full. // Can prevent missing and duplicate ICONS
  3. Since most of our projects use the form of componentized (or dependent libraries), we can directly introduce full font files and full font character resource files in different components; // Only one font file with the same name and string with the same name will be preserved when apK is generated
  4. Since not every component’s iconFONT font is updated with each release, make sure that the font files in the shell project AppShell are up to date;
  5. Monochrome icon and color icon are managed separately by two fonts. // Color font formats do not support changing colors
  6. For monochrome icon control, you can directly control text color, size, shadow, etc.
  7. For color icon color transformation, you can use the same icon different colors different characters, in the transformation, you can directly transform the text displayed characters;

If you don’t want to optimize your package size with Iconfont, you can go a step further and use iconfont as a web font. For details, see downloadable Fonts in Android development documentation.