How to use color icon iconfont in applets

International practice, starting with the following:

outline

In general, when we develop, we use iconfont to manage icons in the project, which is convenient and fast.But when I need the applet to migrate the project, I encounter a lot of questions.How is the iconfont font introduced?dom operation is not supported, how do fonts work?How do I use color fonts?
Problems plague us, and we may have compromises such as the introduction of online font CDN, font base64, Sprite, and so on.

A new way to quickly generate color icon libraries from iconfont-tools

https://github.com/HuaRongSAO/iconfont-tools
Welcome

npm  i  -g  iconfont-tools

cd  project/asset/font_hiytajitqeu  // Enter the folder where the icon file is located

iconfont-tools  // Generate applet-specific files

Generate target file:

.
└── font_hiytajitqeu
    ├── demo.css
    ├── demo_index.html
    ├── iconfont.css
    ├── iconfont.eot
    ├── iconfont.js
    ├── iconfont.svg
    ├── iconfont.ttf
    ├── iconfont.woff
    └── iconfont.woff2
    ├── iconfont-weapp        # Target Folder
    │   ├── icon              # Generate native icon component library
    │   │   ├── icon.js
    │   │   ├── icon.json
    │   │   ├── icon.wxml
    │   │   └── icon.wxss
    │   ├── iconfont-weapp-icon.css  # css with color icons
    │   └── iconfont-weapp-icon.wxss # wxss with color icons

Last:

• Mode 1: Introduce applet item: @import'/your/path/font_hiytajitqeu/icon font-weapp/icon font-weapp-icon.wxss'
• Mode 2: Register component:'icon':'/your/path/font_hiytajitqeu/icon font-weapp/icon'

Other applet frameworks, taro, wepy, mpvue, and so on, can be implemented directly by introducing the iconfont-weapp-icon.css file.

principle

The implementation principle is mainly realized by using SVG as background image.
Usually we implement an icon by using base64 as the background image:

.icon {
  width: 20px;
  height: 20px;
  background: url(data:image/svg+xml;base64, PHN2ZyB2ZXJza..) no-repeat center;
  background-size: 100%;
}

However, there is a minor problem in generating background maps from base64 bits, mainly because of the problem with the base64 algorithm, which increases the number of code and thus the file size.
Simple principle: about three characters of a string are converted to four characters
Encrypting with base64 increases file size by 2,30%

So there's a new way to introduce it:

SVG Direct Inline

.icon {
  width: 20px;
  height: 20px;
  background: url(<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#00A5E0" d="M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z"/></svg>') no-repeat center;
  background-size: 100%;
}

That's not perfect!
Unfortunately, with compatibility issues, IE may not be available online.
What is the problem?
",%,#,{,},<,>These special symbols.

The problem is found, and the solution is to encodeURIComponent url the data.

.icon {
  width: 20px;
  height: 20px;
  background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20versi...)
    no-repeat center;
  background-size: 100%;
}

This makes the svg display possible.

Extracting from iconfont requires SVG

The download of the extracted iconfont is usually as long as this

Where the SVG code, in the iconfont.js and iconfont.svg files

By comparing and carefully reading the source code, you can see that the answer is in iconfont.js

The location of the red box in the picture is the full source of the svg.

Then the implementation is clear

Find corresponding svg tag==>extract tag===> encodeURIComponent encoding tag==> generate css file

Great success!

So the question is, how do I download the tool?

https://github.com/HuaRongSAO/iconfont-tools

Crab and Crab

Related reading:
Zhang Xinxu: Inline SVG pictures in CSS
base64