1、阿里圖標(biāo)使用幫助

2、簡(jiǎn)述：

　　阿里圖標(biāo)三種應(yīng)用方式：

　　1> unicode：nicode是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式

a. 兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器
b. 支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等
c. 因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目（這里的項(xiàng)目時(shí)你在阿里圖表官網(wǎng)中創(chuàng)建的圖表集合）里有多色圖標(biāo)也會(huì)自動(dòng)去色
這里需要注意：新版iconfont支持多色圖標(biāo)，這些多色圖標(biāo)在unicode模式下將不能使用，如果有需求建議使用symbol的引用方式

　　2> font-class：unicode使用方式的一種變種，主要是解決unicode書(shū)寫(xiě)不直觀，語(yǔ)意不明確的問(wèn)題

a. 兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器
b. 相比于unicode語(yǔ)意明確，書(shū)寫(xiě)更直觀。可以很容易分辨這個(gè)icon是什么
c. 因?yàn)槭褂胏lass來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用
這里需要注意：本質(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的，如果有需求建議使用symbol的引用方式

　　3> symbol：全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流（這種用法其實(shí)是做了一個(gè)svg的集合，不懂，不管了，能用就行）

a. 支持多色圖標(biāo)了，不再受單色限制。
b. 通過(guò)一些技巧，支持像字體那樣，通過(guò)font-size,color來(lái)調(diào)整樣式。
c. 兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
d. 瀏覽器渲染svg的性能一般，還不如png。

3. 這里僅說(shuō)明symbol的使用方法（PS：因?yàn)槲⑿判〕绦颥F(xiàn)在只有image組件支持svg）

　　首先選擇你想使用的圖片，加入到購(gòu)物車(chē)，最后點(diǎn)擊添加至項(xiàng)目，進(jìn)入項(xiàng)目可以看到所有你選擇的圖標(biāo)，點(diǎn)擊暫無(wú)代碼，點(diǎn)此生成，記住這個(gè)鏈接，考試要考

　　這里說(shuō)明一下，我沒(méi)有使用到npm的組件包，這表示我需要重新搭建npm環(huán)境，嘁！

　　1> 快速搭建npm環(huán)境，yarn沒(méi)裝，不管了，這里只用npm

　　　　到你的根目錄，打開(kāi)終端命令（CMD窗口），確保當(dāng)前目錄是項(xiàng)目的根目錄，命令：

　　　　> npm init -y

　　　　這時(shí)根目錄會(huì)多出一個(gè)package.json文件

　　2>需要使用到mini-program-iconfont-cli（PS：一種適合小程序的多色解決方案），命令：

　　　　>npm install mini-program-iconfont-cli --save-dev

　　　　這時(shí)正在下載支持的組件，耐心等待，會(huì)多出一個(gè)node_modules文件夾

　　3> 支持的組件已經(jīng)下載完了，初始一下，生出配置文件，命令：

　　　　> npx iconfont init

　　　　出現(xiàn)了，Help 怪。。。

　　　　多出一個(gè)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

　　　　多出一個(gè) iconfont文件夾，這個(gè)是為小程序生成的組件

　　4> 打開(kāi)iconfont.json配置文件

{
    "symbol_url": "阿里官網(wǎng)提供的JS鏈接，例：//at.alicdn.com/t/font_1616497_b708i6mgh3d.js",  ###生成的在線(xiàn)鏈接
    "save_dir": "./iconfont", 
    "use_rpx": false, 
    "trim_icon_prefix": "icon", 
    "default_icon_size": 18 
}

　　5> 組件就需要引用

　　到app.json 中加上（注意目錄）

"usingComponents": {
    "iconfont": "./iconfont/iconfont"
}

　　6> 建一個(gè)頁(yè)面測(cè)試

<iconfont name="iconbolanggu-" size="99"/>

效果：

　　

　　demo:　　鏈接：https://pan.baidu.com/s/11fiJi9Flfo35MNoTzzUSwQ
　　　　　　 提取碼：8zzh

　　　　-------- 轉(zhuǎn)載請(qǐng)標(biāo)注

總結(jié)

以上是生活随笔為你收集整理的微信小程序-使用阿里图标（彩色图标）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。