This article is the first signed article of the rare earth nuggets technology community. Reprinting is prohibited within 14 days. Reprinting without authorization is prohibited after 14 days. Infringement must be investigated!

The last article in the column Portal: Practical Cases: Preliminary Exploration of Project Configuration & Icon Component Warm Up

The source code of the content involved in this section can be found in the vue-pro-components c3 branch, star support is welcome!

Preface

This article is the fourth article in the column of Building a Business Component Library Based on Vite+AntDesignVue [Fonts and How much do you know about SVG icons? ], we continue to explore another display form of icons——SVG. Before developing the SVG icon component, there are still some issues we must figure out!

Font knowledge worth knowing

We can’t blindly develop components, we can ask ourselves first:Since we have font icons , why do you need SVG icons?

Before answering this question, we still need to understand some basic knowledge of fonts, so as not to be half-knowledgeable in specific applications.

Let's first look at the major categories of computer fonts:

Quote from Wikipedia Computer_font:

There are three basic kinds of computer font file data formats:

• Bitmap fonts consist of a matrix of dots or pixels[1 ] representing the image of each glyph in each face and size.
• Vector fonts (including, and sometimes used as a synonym for , outline fonts) use Bézier curves[2], drawing instructions and mathematical formulae to describe each glyph, which make the character outlines scalable to any size.
• Stroke fonts use a series of specified lines and additional information to define the size and shape of the line in a specific typeface , which together determine the appearance of the glyph.

• Bitmap font (synonym: Bitmap fonts) are essentially a matrix of dots or pixels (that is, a dot matrix). Pixelated content will look worse (distorted, blurry, etc.) It is shown that the corresponding relationship between the content pixel and the device pixel is not known), which requires the nearest neighbor interpolation according to the Nearest-neighbor interpolation algorithm. The final calculated position is not necessarily ideal, and jaggedness may also appear at the same time. This display is lossy , needs to be optimized in combination with the anti-aliasing algorithm.

• Vector fonts (synonym: outline fonts) are pixel-independent and use Bezier Curves, drawing instructions, mathematical formulas, etc. describe glyphs. Unlike bitmap fonts, which pre-process pixels, they calculate and render in real time, which is relatively slower. However, such fonts can theoretically adapt to various resolutions, but the final effect also depends on the specific implementation of the rendering engine, and jaggedness may also appear, because the vector is theoretically perfect, but it still corresponds to the display device. To fall on specific pixels, it is ultimately necessary to combine anti-aliasing, font fine-tuning, sub-pixel rendering, DirectWrite and other technical means to optimize. Vector fonts mainly include PostScript Type 1 and Type 3 fontsTrueTypeOpenType[5] etc. .

Type 1, Type 3 are all developed by Adobe; TrueType was created by Apple to fight against Adobe, and later allowed Microsoft to join in and use it together; finally Microsoft joined forces Adobe launched OpenType (which can be understood as a superset of Type 1 and TrueType), which is purely commercial competition!

The

.ttf extension indicates a regular TrueType font or an OpenType font with TrueType outlines.

.woff is an OpenType font or a TrueType font. Since it is a web-specific font, zlib compression is used. woff was submitted to the World Wide Web Consortium (W3C) by the Mozilla Foundation, Opera Software and Microsoft in April 2010, and became a W3C recommended standard on December 13, 2012. Woff2 was promoted by Google and improved the compression scheme. It was released in 2018 In March, it became a W3C recommended standard, which is the future development direction of web fonts.

• Stroke fonts are a subdivided form of vector fonts that use a series of specified lines and additional information to define the size of the lines in a particular font Size and shape, which together determine the appearance of a glyph. Intuitively, it is not easy to see the difference between it and outline fonts, but literally, outline fonts are a bit similar to the fuller effect of artistic words, with stroke and fill operations, requiring more vertices to It supports the entire glyph; while the strokes focus on the skeleton and stroke, requiring fewer vertices and saving space, and are used more in ideographic characters.

The figure below quotes the attached drawing of the invention patent "A Method for Accessing Stroke Vector Font Library", intrusion and deletion!

The stroke font is on the left, and the outline font is on the right.

The advantage of bitmap fonts is that it is simpler and faster than other fonts in terms of production and rendering; its biggest defect is that it cannot be adaptive Display devices with various resolutions require a separate set of glyph raster images when displaying whether it is bold, italic, or different font sizes. This is multiplication-level storage redundancy, which is a waste of storage space (although it can also be used by algorithms Adjusting and transforming font variants, but more performance-intensive). Despite these defects, in the case of weaker computer performance in the early days, bitmap fonts seemed very timely and had an irreplaceable position.

With the improvement of computer performance (computing power, rendering, etc.), the status of bitmap fonts has begun to be challenged by vector fonts. In some scenarios, vector fonts have become an excellent choice; while bitmap fonts are active in some scenarios that need to consider factors such as speed, simplicity, and hardware performance, such as embedded devices, operating system terminal consoles, and dot matrix printers. wait.

Are web fonts stroke fonts?

After understanding these font knowledge, the question arises, what type of fonts are the fonts we commonly use in Web pages?

Intuition tells us that it seems to be a vector font, because when the web page is stretched, the characters are still very clear and there is no jaggedness.

It is indeed the case. Dot matrix fonts are the fonts used in the early days of computers. Since the 1980s, vector fonts have gradually become popular. Basically, we see vector fonts in web pages now.

There are many kinds of fonts, but not many of them can be directly used in the Web, because there is no guarantee that the specified fonts are installed in the user's computer. Therefore, when specifying font-family, it is usually considered to use web-safe fonts to ensure that all operating systems, old and new versions, English and Chinese, emoji, etc. can be taken into account.

font-family: system-ui, -apple-system, BlinkMacSystemFont, ' Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica  Neue', Arial, 'Noto Sans', 'PingFang > SC', 'Hiragino Sans GB', 'Microsoft  YaHei', 'WenQuanYi Micro Hei', sans-serif, 'Apple  Color Emoji', 'Segoe UI Emoji', ' Segoe UI Symbol', 'Noto Color Emoji';

Font icons VS SVG icons

Since web fonts are basically Vector fonts, font icons basically use vector fonts such as .ttf, .woff, .woff2, etc. It seems that there are no shortcomings, so why Are SVG icons slowly becoming the first choice for major websites?

First of all, a font is a resource. If the font fails to load, the rendering of the font icon will also fail, and a "small square" may appear. Moreover, if the font loading is slow due to network and other reasons, there may be placeholder jitter (using Base64 inline fonts will solve this problem).

The SVG is the inline content of the HTML document, and the rendering will be more reliable.

Secondly, font icons do not support colored icons. Even though colored fonts are gradually gaining some voice in the Web (iconfont platform also supports colored font icons), there are still some lack of compatibility, and there are still some problems in production and use. Careful consideration is required. And SVG itself describes the drawing instructions through XML, which has stronger control over drawing details and naturally supports color! However, with the popularity of color fonts on the Web in the future, this aspect will no longer be a disadvantage of font icons.

SVG icons can support more expressive capabilities, such as filters, animations, etc., and also support DOM operations, which are incomparable to font icons.

Font icons are not accessibility friendly. Font icons are implemented through pseudo-elements, which are less accessible than SVG. SVG can use title and desc tags to describe information, which is good for SEO and accessibility It is more suitable for reading.

When the number of icons is large, the advantages of SVG icons are more obvious, and SVG supports on-demand use. However, the icons of font icons are coupled in a font file, which will result in a large final font file.

But that's not to say that font icons are useless, font icons are better in terms of browser compatibility, but they don't seem to matter in the "IE is dead" situation (except for the old system).

In general, font icons and SVG icons have their own advantages. It does not mean that one is definitely better than the other. We can choose according to the actual scene.

How to use SVG icons

• Using SVG directly: inline SVG, picture, background image and other forms, the disadvantage is that it is not very convenient to use and not versatile enough.
• SVG Sprite: Based on symbol + use, it is an SVG version of Sprite, which can be packaged into components for use.
• SVG independent component: Make each SVG icon into a component that can be loaded on demand, so that it can be used on demand and has the advantages of componentization, similar to The icon single component provided by @ant-design/icons-vue.

SVG icon component implementation ideas

Let’s try the SVG Sprite method first.

SVG Sprite has a symbol first, and then uses it to reference it.

The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.

The symbol tag is used to define the graphic template object, but it will not be rendered directly, and needs to be instantiated through the use tag.

The figure above is the general structure of SVG symbol. You can find that there is a defs tag under the outermost svg.

The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a < defs> element are not rendered directly.

In SVG, reusable content is defined under defs, not limited to symbols.

symbol is not mandatory to be placed under defs, it can also be placed directly under the svg tag, because it is the meaning of the template itself and will not be rendered directly .

We can also find that there is an attribute id on each symbol, and this id will become the basis for quoting the use tag, xlink:href through # add id to refer to the corresponding symbol.

After understanding these knowledge, we should be clear that to realize SVG Sprite component, the first step is to produce symbol content.

The UI is usually delivered to the front end as individual SVG files, so how to turn these independent SVG files into the symbols we want?

This involves file operations. If it is implemented with nodejs, it must be inseparable from the api related to the fs module. The basic principle is to read the string content of the file, and then perform splicing processing to output a string. Inserted into the HTML document stream via innerHTML.

If your icon-like SVG files are all placed in the project project, then you can choose svg-sprite-loader (webpack system) and do this part of the work directly, and the rest is to package the components.

Vite can also implement similar plug-ins, you can find many by searching keywords such as vite svg sprite.

If we are using iconfont, we can also directly use the script provided by iconfont. After importing this js file through the script tag, the related SVG symbol will be created automatically.

The remaining work is to encapsulate the use of use into components to make business calls easier.

Coding to realize SVG icon component

The basic logic is clear, let's code and realize it.

In order to distinguish it from the font icon component, we renamed the font icon component Icon implemented in the previous section to IconFont, and this time we will implement The SVG icon component is called IconSvg.

First import this online js file in the iconfont icon project in the business project.

According to the above, we can temporarily regard the playground package as a business project, so directly in the playground< Just import this js into index.html in the /code> package.

After importing js, we can see that the SVG symbol has been generated.

Note: If you are worried about the stability of the cdn, you can consider downloading the relevant resources in the iconfont project to the project for direct reference, so you don’t have to worry Which antenna business is affected due to cdn problems.

The next step is to handle the logic of use in the component.

<template>
 <svg :style='{ width: `${size}px`, height: `${size}px`, fill: color }'>
 <use :xlink:href='`#${iconPrefix}${icon}`'></use>
 </svg>
</template>

<script lang='ts' setup>
import { props } from './props'

defineProps(props)
</script>
< /pre>
The attribute definition is basically the same as the IconFont component, but the specific usage is a little different.
The size of the component is still controlled by the attribute size, but the corresponding style is controlled by width and height control (because font-size is invalid for svg).
The color of the component is controlled by the fill of the style (because color is also invalid for svg).
Let's look at the current usage effect.
The basic effect came out, but we found a problem, if the size and color attributes are not bound , the SVG icons are not behaving as we expect.
The default size is too large, it is expected to be about the same size as the text in the same block.
The default color does not meet expectations, we hope it can follow the font color of the parent element, so that it looks coordinated.
So, some more optimizations are needed. We wrap the outer layer of the component with a span tag, let the size of svg inherit the font size of span, let svg inherits the color of span.
Inheritance in size: You can set the width and height of svg to 1em, so that you can Consistent with the font size of the text. 
Color inheritance: you can set fill attribute value of svg to currentColor, currentColor is a css variable, it The color attribute value of the current element can be obtained, so that it can be consistent with the text color. 
The code modification is as follows:
 Check the effect again, and find that the SVG icon can also coordinate with the text effect when no attribute is passed.
So far, the SVG icon component can handle most scenarios.
References
Computer font
A method for accessing stroke vector fonts
Conclusion
 
In this section, we first learned some basic knowledge about fonts and some advantages of using SVG icons, and then learned the basic idea and coding process of implementing SVG icon components. In the process of writing this article, I feel that fonts are a very complicated field of knowledge. If the relevant knowledge points in the article are incorrectly described, please point them out! In actual projects, there will be some expanded requirements for icon components, which we will discuss in detail in the next article. If you are interested in my column, you are welcome to subscribe and follow this column[6], then we can discuss and communicate with you during the development of the component library The problem.