Vue introduces iconFONT project practice

The development of icon library, the importance of iconfont icon library (common projects)

For the front end, ICONS are evolving fast. From IMG tags, to Sprite images, to font ICONS, SVG, and even SVG has a Sprite-like solution, SVG-Sprite-Loader. In practice, UI libraries such as Bootstrap, Font-awesome, element-UI and so on are basically standardized with font ICONS.

Iconfont – Icon management tool

An icon management platform created by MUX team of Alibaba’s Ali Mom.

This is an online tool for designers and front-end developers. After uploading ICONS to Iconfont, designers can customize and download ICONS in various formats, or convert ICONS into fonts, which is convenient for front-end engineers to adjust and use freely.

With this free tool, designers can not only browse and download a large number of great designers’ icon works, but also manage and display their own designs. It has become an essential tool in the daily work of many UI designers and front-end developers.

Large quality original icon library

The characteristics of

1. Vector icon online storage management.

2. A large number of ICONS drawn by designers can be uploaded to solve the pain point of managing and finding ICONS is very difficult;

3. According to the project management icon, support to customize the size and color, no matter the front-end engineer or UI designer, no longer have to painlessly cut the map and move bricks, need any size, you can download on the platform;

4. For developers, you can put the required vector icon in the way of project management, one key generation on the Web through CSS font control vector icon, support in the Web/H5 / small program /App call, simple and convenient, no longer need to use fuzzy picture icon;

5. For designers, there are thousands of designers sharing their ICONS on the platform, which is a great tool for icon design learning and inspiration.

Iconfont – Basic use

There are three ways to introduce iconfont: Unicode, Font class and Symbol.

1. Unicode mode (not recommended)

Online use

1) Introduction of online fonts in index. SCSS

@font-face { font-family: 'iconfont'; /* project id 1254715 */ src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot'); src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2') format('woff2'), url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff') format('woff'), url('//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf') format('truetype'), url('//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont') format('svg'); }Copy the code

2) used in the page

Use is very unfriendly, using unicode code representation, use icon must go to the iconfont project to query unicode code.

<template> <div> <i class="iconfont">&#xe7ee; </i> <i class="iconfont">&#xe7ed; </i> <i class="iconfont">&#xe7ec; </i> <i class="iconfont">&#xe7eb; </i> </div> </template>Copy the code

The local use

Sometimes the network is not that powerful, or the Intranet environment, so don’t consider using online references.

1) For local use, the font library should be downloaded and put into the project first.

2) Define the following code in the global style file

@font-face { font-family: "iconfont"; src: url('.. /fonts/iconfont.eot'); /* IE9*/ src: url('.. /fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('.. /fonts/iconfont.woff') format('woff'), /* chrome, firefox */ url('.. /fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */ url('.. /fonts/iconfont. TTF ') format(' trueType '), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+*/ url('.. /assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}. Iconfont {font-font-family: "iconfont"! important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }Copy the code

3. use

This is the same as online references, using Unicode codes to display ICONS.

<template><i class="iconfont">&#xe7ee; </i></template>Copy the code

* summary

1) Best compatibility, support IE6 +, and all modern browsers.

2) Support dynamic adjustment of icon size, color and so on according to font.

3) Because it is a font, it does not support multicolor. Use only monochrome ICONS on the platform, even if there are multi-colored ICONS in the project, the color will be automatically removed.

2, Font class mode (friendly)

A more friendly wrapper, similar to font-awesome, allows us to call the icon simply by using class. The idea is to use the before pseudo-element to display the icon.

Online use

Super simple, as long as the online generation code, reference the online CSS file can be used.

1) Reference in index.html

<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css">
Copy the code

2) Font ICONS can be used in projects

<template>    
    <i class="iconfont cl-icon-fold"></i>    
    <i class="iconfont cl-icon-delete-solid"></i>
</template>
Copy the code

The local use

Similar to Unicode, download the code locally. Because I’m using SCSS to manage styles, I need to extract the key parts from the downloaded code. In addition to referencing the font library, copy all the before pseudo-elements defined in iconfont. CSS into your SCSS file.

@font-face { font-family: "iconfont"; src: url('.. /fonts/iconfont.eot'); /* IE9*/ src: url('.. /fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('.. /fonts/iconfont.woff') format('woff'), /* chrome, firefox */ url('.. /fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */ url('.. /fonts/iconfont. TTF ') format(' trueType '), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+*/ url('.. /assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}. Iconfont {font-font-family: "iconfont"! important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.cl-icon-user:before {content: "\e64b"; }Copy the code

* summary

1) Good compatibility, support IE8 +, and all modern browsers.

2) More intuitive writing than Unicode. It’s easy to tell what an icon is.

3) Since ICONS are defined using class, all you need to do to replace ICONS is change the Unicode reference in class.

4) Multicolor ICONS are not supported, however, because they are essentially fonts.

* * suggested

Since adding new ICONS requires regenerating code in iconfont.cn, this isn’t exactly convenient, but it’s still a lot more advanced than Unicode. According to my experience, it is recommended that during debugging, the online mode should be used first, and then downloaded to local use after debugging is confirmed, which is of great help to improve efficiency.

3, symbol way (support multi-color icon)

SVG symbol provides functions similar to Sprite, which makes SVG easier to use and can also meet the needs of the icon system.

Online use

1) Select symbol mode in iconfont project and generate JS code online

2) Introduce the JS file in index.html

<script src="//at.alicdn.com/t/font_1254715_oewlgci0ut.js"></script>
Copy the code

This js is used to generate SVG symbols in a document

3) Use SVG ICONS in the page with the Use tag. The href value is set to the id of the corresponding symbol.

<svg aria-hidden="true">    <use xlink:href="#test-icon-word-ext"></use> </svg>
Copy the code

The local use

The same is true for local use, mainly relying on the js file generated online, open the link of the online JS file in the browser empty label, you can get its content, and then copy the content, name a JS file, and put it in the local project static resources directory, reference can be.

4. Automatic icon management (must see)

ICONS used in the above three ways all rely on iconfont to manage in the form of the project. If an icon is added to the project, icon related resources have to be regenerated and updated in the code. It is not easy to manage ICONS.

Svg-sprite-loader + require.context elegantly solves this problem.

The project is constructed using the Vue CLI

Refer to steps

1) Install SVG-Sprite-loader

npm install svg-sprite-loader  -save-dev
Copy the code

2) Create an SVG folder under the SRC directory to store all SVG files.

3) Configure the svG-sprite-loader rule corresponding to loading SVG files in vue.config.js

chainWebpack: config => { config.module.rules.delete('svg'); // Important: Remove the default configuration to handle SVG, Config.module. rule('svg-sprite-loader').test(/\.svg$/).include.add(resolve(' SRC /assets/ ICONS/SVG ')) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]',}); }Copy the code

Method of use

1) Encapsulate svgicon.vue components

<template>  
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">    
    <use :xlink:href="iconName" />  
    </svg>
</template>
<script>
    export default {  name: 'SvgIcon',  
        props: {    
            svgName: {      
                type: String,      
                required: true    
            },    
            className: {      
                type: String,      
                default: ''    
            }  
         },  
        computed: {    
            iconName() {   
                return `#icon-${this.svgName}`    
          },    
        svgClass() {      
            if (this.className) {        
                return 'svg-icon ' + this.className      
            }  else { return 'svg-icon' }    }  }}
</script>
Copy the code

Register SvgIcon as a global component in main.js

import svgIcon from './components/SvgIcon.vue'Vue.component('svg-icon', svgIcon)
Copy the code

3) Load all SVG files globally in main.js without importing them every time you use them

// Load SVG globally, Importconst req = require.context('./ SVG ', false, /\.svg$/)const requireAll = requireContent => requireContent.keys().map(requireContent)requireAll(req)Copy the code

Iii. Iconfont – Project practice

1. Pain points

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

Solutions to icon problems in actual business code, such as exporting files in PNG or SVG format, directly referencing them as static resources in projects, or uploading them to CDN as external chain references. Obviously, there are some minor problems with each of these schemes:

1) In user experience, including blurred display on high-resolution screen, additional HTTP request, page jitter caused by asynchronous loading, etc.;

2) In terms of development experience, including the inability to control styles through CSS so as to keep them consistent with text, and the difficulty to reuse and update.

For the 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:

1) One is that there is no correlation between projects, and the same icon cannot be reused and uniformly updated;

2) One is that corporate accounts cannot be strongly bound and cannot be controlled during team collaboration and staff turnover;

3) The last one is the copyright issue of icon. Everyone can use the icon uploaded to the platform for free, which may not be what the company wants.

2. Expected goals and solutions (refer to Zhuan FE solution)

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:

1) UI is responsible for unified management of icon resources — uploading icon to the platform, differentiating business lines through different “large libraries” and forming icon pool;

2) FE only needs to care about its own project — select icon from the pool, generate the project, export the external chain and introduce it into the project for use.

• Icon: Uniformly processes uploaded SVG files and saves complete path information.

• Large library: establish mapping relationship with icon, group, edit and update icon, mainly for UI;

• Project: also established mapping relationship with icon, FE oriented, selected icon to create project, responsible for generating external chain, downloading ICONS and other abilities;

• 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: parse SVG paths, convert them into TTF, WOFF, eOT and other common font files, and upload them to CDN.

3. Implementation of project practice (reflection and solution)

1) UI is responsible for unified management of icon resources — uploading icon to Iconfont platform and forming icon pool according to business lines;

2) FE is responsible for the unification of icon code resources — selecting icon from the pool, generating the project, exporting the external chain and introducing it into the project for use.

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.

Iconfont – a new color font icon

Color fonts (colors fonts or chromatic fonts) is a font technique that allows more than one color to be used in each font type. It can be used not only in the design of ICONS and emojis, but also in plain text fonts.

Color font format

Currently, there are several main formats that support color fonts, which are part of the OpenType specification:

SVG: A vector font standard led by Adobe and Mozilla. Its full name is OpenType SVG (OT-SVG). It contains not only standard TrueType or CFF glyph information, but also optional SVG data, allowing you to define colors, gradients, and even animation effects for fonts. Color matching information from the SVG standard will also be stored in CPAL tables. Note: Apple’s implementation follows the W3C’s SVG Native specification, which is a subset of SVG 1.1.

COLR/CPAL(Version 0) : Vector font standard led by Microsoft. Support for COLR, which records layer data, and CPAL, which records color matching information, is integrated into Windows 8.1 and later (this version does not support gradience).

CBDT/CBLC: Bitmap font standard led by Google. CBDT records color bitmap data and CBLC records bitmap location data, which is actually the color version of EBDT/EBLC.

SBIX: Bitmap font standard led by Apple, the format used by Apple Emoji. SBIX is a standard bitmap image table that contains PNG, JPEG, or TIFF image information. Support for SBIX is integrated with macOS and iOS.

COLRv1 (Version 1) : A Google-promoted version based on COLR/CPAL tables that supports graditions, Affine transformations, and multiple blend modes. It is currently available in the OpenType 1.9 Alpha specification.

* How to use

1, open a multi-colored icon library, select a few favorite ICONS to add to the shopping cart.

2. Click the shopping cart button on the right to open the shopping cart floating layer.

3. In the shopping cart float, click the New project button, enter the project name, and click OK. A test color font icon project is created.

4, it will automatically jump to the new project, click “Project Settings” in the upper right corner.

5. Check the “Color” option in the font format and click “Save” button.

6. Click “No code yet, click here to generate”. After a while, the color font will be generated slowly.

7, after successful generation, there will be a “preview font” menu behind the online link button, open to test the effect of the actual color font.

Design is great because of unlimited imagination, and technology is the wings of imagination. Spread your wings and explore more interesting ideas together!