2, Description:
Ali icons application modes:
1> unicode: nicode fonts in web client applications most primitive way
a. the best compatibility, support + IE6 , and all modern browsers
b. supported by font way to dynamically adjust the icon size, color, etc.
c. Because it is the font, so I do not support multi-color. Use only platform in monochrome icons (set of charts you create a chart in Ali's official website when the project here) in multiple color icon will automatically go to color even if the project
note here: the new version of iconfont support multi-color icons with these multicolor icon will not be used in unicode mode, if there is a demand recommended symbol of reference
2> font-class: a variant of unicode use, mainly to solve unicode writing is not intuitive, semantic ambiguity problem
a. good compatibility, support + IE8 , and all modern browsers
b., compared to unicode semantics clear, writing more intuitive. It can easily tell what this icon is
c class to use as a custom icon, so when you want to replace an icon, only need to modify the class inside unicode reference.
It should be noted: in essence, is the use of fonts, so still does not support multi-color icons if there is a demand recommended symbol of reference
3> symbol: the new use, it should be said that this is the future mainstream (this usage is in fact made a collection of svg, do not understand, no matter, can be used on the line)
a. supports the multi-color icons , monochrome no longer subject to restrictions. . b By some techniques, like fonts that support, through font - to adjust the pattern size, color. c. poor compatibility, support for IE9 + , and modern browsers. d. svg browser rendering performance in general, not as good as png.
3. The method described herein is used only in symbol (PS: Program because there are only small micro-channel image component supports SVG)
First select the pictures you want to use, add to cart, and finally click add to a project, you can see all the icons into the project of your choice, click No code Click here to generate , remember this link, the examination to test
Explain here, I did not use to npm component package, which means I need to re-build npm environment, whispering sound!
1> npm quickly build environment, yarn not installed, no matter, where only npm
To your root directory, open a terminal command (CMD window), make sure the current directory is the root directory of the project, the command:
> npm init -y
Then the root directory of the file will be more of a package.json
2> need to use the mini-program-iconfont-cli (PS: suitable applet multicolor solutions), the command:
> npm install mini-program-iconfont-cli --save-dev
Then download components are supported, be patient, it will be more of a node_modules folder
3> support components have been downloaded over, the initial look, give birth to the configuration file, the command:
> npx iconfont init
Appeared, Help blame. . .
One more iconfont.json profile
Usage: npx iconfont-init : generate config file npx iconfont-wechat : generate wechat icon component npx iconfont-alipay : generate alipay icon component npx iconfont-baidu : generate baidu icon component npx iconfont-toutiao : generate toutiao icon component npx iconfont-qq : generate qq icon component
> npx iconfont-wechat
One more iconfont folder, the program is generated for small components
4> Open iconfont.json Profiles
{ " Symbol_url " : " JS Ali official website provides a link, for example: //at.alicdn.com/t/font_1616497_b708i6mgh3d.js " , ### generate online links " save_dir " : " ./iconfont " , " use_rpx " : to false , " trim_icon_prefix " : " icon " , " default_icon_size " : 18 is }
5> components will need to reference
To app.json the plus (note directory)
"usingComponents": { "iconfont": "./iconfont/iconfont" }
6> to build a test page
<iconfont name="iconbolanggu-" size="99"/>
effect:
demo: link: https: //pan.baidu.com/s/11fiJi9Flfo35MNoTzzUSwQ
extraction code: 8zzh