官方 icon 類型默認(rèn)有九種：
success, success_no_circle, info, warn, waiting, cancel, download, search, clear
<icon type="success" size="93" color="green"></icon>
官方提供數(shù)量太少缸剪，其它自定義 icon 方式：
1、使用圖片
- 如果圖標(biāo)過多唬渗，造成大量HTTP請求；
- 不方便修改顏色镊逝；
- 圖標(biāo)放大會變虛撑蒜；
2、精靈圖（Sprite）
- 連續(xù)圖片集座菠，加載時只加載一次，減少HTTP請求浴滴。在使用時岁钓，通過背景圖片定位和裁剪，只渲染圖片的一小片區(qū)域降宅。
連續(xù)圖片集.png
sprite.png
3激才、CSS 樣式繪制
繪制一個關(guān)閉按鈕icon：
.icon_close{
display: inline-block;
width: 17px;
height: 2px;
background-color: green;
transform: rotate(45deg);
}
.icon_close::after{
content: '';
display: block;
width: 17px;
height: 2px;
background-color: red;
transform: rotate(-90deg);
}
- 每次需要手寫css代碼额嘿，工作量大劣挫；
- 圖標(biāo)繪制時，需要統(tǒng)一一個中心點压固，否則使用時控制位置比較麻煩；
- 不方便控制大小坎炼、顏色拦键；
4、矢量字體（推薦）
- 矢量圖標(biāo)庫 www.iconfont.cn
從 iconfont 中找到需要的圖標(biāo)：
iconfont.png
.wxss 文件
@font-face {
font-family: 'iconfont'; /* Project id 2563935 */
src: url('//at.alicdn.com/t/font_2563935_33okfvdpwa8.woff2?t=1621605494968') format('woff2'),
url('//at.alicdn.com/t/font_2563935_33okfvdpwa8.woff?t=1621605494968') format('woff'),
url('//at.alicdn.com/t/font_2563935_33okfvdpwa8.ttf?t=1621605494968') format('truetype');
}
.iconfont{
font-family: 'iconfont';
font-size: 40px;
color: red;
}
.icon_people::before{
content: '\e74b';
}
.icon_heart::before{
content: '\e8ab';
}
.wxml 文件
<icon class="iconfont icon_people"></icon>
<icon class="iconfont icon_heart"></icon>
效果：
iconfont.png
5芬为、SVG 矢量文件
有路徑繪制信息的文本描述文件媚朦；
Sketch 軟件询张、photoshop 在線編輯(https://www.uupoop.com)、iconfont 網(wǎng)站都可以導(dǎo)出 SVG 格式文件的圆。Sketch 導(dǎo)出的有冗余信息越妈，例如注釋钮糖，不簡潔店归；
將 SVG 文件轉(zhuǎn)化為 base64 字符串消痛，在小程序中使用 base64 字符串作為圖片源且叁，實現(xiàn)自定義圖標(biāo)。
image 轉(zhuǎn) base64 工具網(wǎng)址： https://www.sojson.com/image2base64.html
// wxss
.svg_icon {
display: block;
width: 200px;
height: 200px;
background-repeat: no-repeat;
background: url("data:image/svg+xml;base64,PHN...Zz4=");
}
// wxml
<icon class="svg_icon"></icon>
- 也可使用 canvas 繪制 SVG 信息秩伞，但 canvas 多用于制作動畫逞带，用于自定義圖標(biāo)大材小用欺矫。騰訊團(tuán)隊編寫的 SVG 信息繪制成圖像介紹：https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013，原理基于 Canvas 繪制展氓。
icon 常見問題
- icon 圖標(biāo)是可以和文本同行的穆趴，放在段落中。
- 真機(jī)上 icon 顯示空白遇汞。
如果圖標(biāo)是自定義實現(xiàn)的未妹，要檢查機(jī)型及嵌入的字體文件類型，可能是兼容新引起的空入。在小程序中推薦使用 TTF 和 WOFF 格式的字體络它，如果使用這兩種字體問題依然存在，則考慮換 SVG 格式的數(shù)據(jù)嵌入执庐。
