1、阿里圖標使用幫助
2、簡述：
阿里圖標三種應用方式：
1> unicode：nicode是字體在網頁端最原始的應用方式
a. 兼容性最好，支持ie6+，及所有現代瀏覽器
b. 支持按字體的方式去動態調整圖標大小，顏色等等
c. 因為是字體，所以不支持多色。只能使用平台里單色的圖標，就算項目（這里的項目時你在阿里圖表官網中創建的圖表集合）里有多色圖標也會自動去色
這里需要注意：新版iconfont支持多色圖標，這些多色圖標在unicode模式下將不能使用，如果有需求建議使用symbol的引用方式
2> font-class：unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題
a. 兼容性良好，支持ie8+，及所有現代瀏覽器
b. 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么
c. 因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用
這里需要注意：本質上還是使用的字體，所以多色圖標還是不支持的，如果有需求建議使用symbol的引用方式
3> symbol：全新的使用方式，應該說這才是未來的主流（這種用法其實是做了一個svg的集合，不懂，不管了，能用就行）
a. 支持多色圖標了，不再受單色限制。 b. 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。 c. 兼容性較差，支持 ie9+,及現代瀏覽器。 d. 瀏覽器渲染svg的性能一般，還不如png。
3. 這里僅說明symbol的使用方法（PS：因為微信小程序現在只有image組件支持svg）
首先選擇你想使用的圖片，加入到購物車，最后點擊添加至項目，進入項目可以看到所有你選擇的圖標，點擊 暫無代碼，點此生成，記住這個鏈接，考試要考
這里說明一下，我沒有使用到npm的組件包，這表示我需要重新搭建npm環境，嘁！
1> 快速搭建npm環境，yarn沒裝，不管了，這里只用npm
到你的根目錄，打開終端命令（CMD窗口），確保當前目錄是項目的根目錄，命令：
> npm init -y
這時根目錄會多出一個package.json文件
2> 需要使用到mini-program-iconfont-cli（PS：一種適合小程序的多色解決方案），命令：
> npm install mini-program-iconfont-cli --save-dev
這時正在下載支持的組件，耐心等待，會多出一個node_modules文件夾
3> 支持的組件已經下載完了，初始一下，生出配置文件，命令：
> npx iconfont init
出現了，Help 怪。。。
多出一個 iconfont.json配置文件
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
多出一個 iconfont文件夾，這個是為小程序生成的組件
4> 打開iconfont.json配置文件
{ "symbol_url": "阿里官網提供的JS鏈接，例：//at.alicdn.com/t/font_1616497_b708i6mgh3d.js", ###生成的在線鏈接 "save_dir": "./iconfont", "use_rpx": false, "trim_icon_prefix": "icon", "default_icon_size": 18 }
5> 組件就需要引用
到app.json 中加上（注意目錄）
"usingComponents": { "iconfont": "./iconfont/iconfont" }
6> 建一個頁面測試
<iconfont name="iconbolanggu-" size="99"/>
效果：
demo: 鏈接：https://pan.baidu.com/s/11fiJi9Flfo35MNoTzzUSwQ
提取碼：8zzh
-------- 轉載請標注