1）原生支持哪些類型
小程序的icon支持以下類型：
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
對應圖像效果依次為：
主要失敗、成功狀態的提示，加三個下載、搜索、關閉圖標。
2）示例與屬性
圖標使用的代碼示例為：
圖標共有三個屬性：
3）圖標與圖片有什麼不同
通過size屬性，可以改變圖標的大小：
使用圖片也可以達到同樣的效果，但是圖片如果像素不夠，放大了之後效果會虛；還有，圖片需要另外存儲與加載，使用起來不如圖標只使用一個名稱方便；再者就是，接下來會看到，圖標可以隨意改變顏色，而圖像不能。
4）color改變的是像素的顏色
圖標可以看作是一些像素點區域的集合，至於這些像素點是什麼顏色，是由color屬性決定的。像上面綠色的success圖標，它的默認色是綠色，中間對勾部分是鏤空的。如果我們給圖標所在的容器一個背景色，那麼對勾呈現的就是背景的顏色：
代碼：
我們可以通過color屬性隨意改變圖標顏色：
但是中間對勾的顏色同時改變不了，因為它是由背景決定的。
下面看一下與圖標有關的問題：
1）圖標能否與文本同行，放在段落中？
可以。效果：
代碼：
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本與圖標只能同時放在view標籤下，放在text標籤內是不行的。text不是容器類組件。
如果文本是從後臺動態取出來的，穿插的圖標的類型也是動態取出來的，能否實現解析、渲染？這個問題留給讀者朋友們思考。
2）icon圖標是怎麼實現的，原理是什麼？
在html中是沒有原生的icon標籤的，小程序基於瀏覽器引擎渲染，它的icon組件是怎麼實現的？
A）最簡單粗暴的方法，是使用img標籤，每個圖標對應一個圖片。
但是這種方法有三個明顯的缺點：造成大量http請求；不方便修改顏色；放大圖片會虛。
B）後來有聰明的工程師發明了精靈圖，什麼是精靈圖？
這是一個字譯。英文叫Sprites，Sprite有精靈的意思，所以翻譯成中文就是精靈圖了。
更確切的意譯，應該是連續圖片集。精靈圖是把一組圖片以非重合、最小化的方式排列成一張圖片，在加載的時候只加載一次，這就減少了http請求。
在使用的時候，能過背景圖片的定位與裁剪呈現某一塊區域的圖標，代碼如下：
精靈圖解決了http請求過多的問題，但是它的顏色不能改變，放大會圖片會變虛。
C）這兩個問題由矢量字體圖標方案解決了。當瀏覽器渲染一個漢字（英文字符也是一樣）的時候，首先看font-family樣式，確定字體名，由字體名確定使用電腦裡的哪個字體文件；接著以漢字的unicode在字體文件裡查找對應的字符信息。
每個字符都有一個唯一的unicode編碼，例如“小程序”這三個漢字的unicode為“\u5c0f\u7a0b\u5e8f”。每個unicode編碼在字體文件中都對應一個唯一的字符描述信息。字體類型有兩類：點陣字體和矢量字體。現在使用最廣泛的是矢量字體。矢量字體又為分為Type1（Adobe）、TrueType（Apple+Microsoft）、OpenType（Adobe+Apple+Microsoft）三種。
在矢量字體文件裡，每個unicode僅是編碼的索引。每個字符描述信息是一堆矢量繪圖描述信息，以Type1為例，它使用三次貝塞爾曲線來描述字形，TrueType則使用二次貝塞爾曲線描述字形。由於矢量字體是繪製出來的，所以它可以實時填充任意顏色，可以無極縮放而沒有鋸齒。
回到我們的矢量字體圖標方案上來。既然字符可以在字體文件裡定義，圖標為什麼不可以呢？我們可以定義任何一個矢量圖形，與一個unicode對應，哪怕這個unicode在其它字體中已被使用也沒有關係。只要使用的是這個字體，這個文件，渲染出來就是我們提交的矢量圖形效果。
阿里巴巴的圖標網站iconfont.cn，不僅提供常用圖標下載，還提供自定義矢量圖標字體的生成與下載。假如我們搜索“sun”，查找到如下所示“晴”這個圖標。
是它的unicode編碼，上面是生成的字體文件。這些字件文件除svn之外，都是矢量格式。eot是微軟IE轉用的OpenType類型；woff與woff2是移動開發專用的矢量字體格式，是對三種矢量字體格式的再封裝；ttf是TrueType字體。之所以在css裡鏈接這麼多字體文件，是為了兼容不同的瀏覽器。
把上面這段css代碼拷貝至wxss樣式文件中，再定義兩個圖標類，如下所示：
@font-face { ...}
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-sun:before { content: "\e603"; color: red; font-size: 20px;}
其中iconfont是為了引用字體”iconfont”，icon-sun是為了定義unicode。
在wxml文件內這樣使用：
文本文本文本文本文本文本文本文本文本文本文本文本文本
在兩個text組件上使用了兩次自定義的圖標樣式。效果如下：
假如我們想自定義圖標怎麼辦？
對於“晴”這個圖標，在iconfont這個網站上可以直接進行簡單的編輯，包裝位移、大小、旋轉、顏色等設置。
如果想進行復雜的編輯，可以將矢量圖下載下來，使用矢量圖編輯軟件，例如Sketch，進行編輯，編輯完成後導出svg格式，在上面這個位置上傳，就可以替換原圖標。
這是使用矢量字體圖標的方案。
D）還有一個方案，是使用css3繪製。舉個例子：
/* 使用css3繪製圖標 */.icon-close { display: inline-block; width: 17px; height: 2px; background: red; transform: rotate(45deg);}
.icon-close::after { content: ''; display: block; width: 17px; height: 2px; background: red; transform: rotate(-90deg);
}
這是一個簡單的使用css3繪製的圖標樣式。wxml代碼為：
文本文本文本文本文本文本文本文本文本文本文本文本文本
運行效果如下：
這種方案每個圖標都需要寫css樣式，勞動量大。即使是別人寫好了樣式，批量引入進來，也有不便控制的問題。它本身並不是字符，如果每個圖標在繪製時沒有一個統一的中心點，在使用時僅控制位置就比較麻煩。
E）最後，還有一個方案，就是使用svg。svg是一種矢量格式，內容和矢量字體描述字符的信息類似，可以讓圖標隨意縮放，沒有鋸齒。在前面我們從iconfont網站下載的css代碼中，最後一行其實就是svg格式的文件：
@font-face { ... url('//at.alicdn.com/t/font_1716930_zt7ou23vy.svg#iconfont') format('svg');}
svg可以賦值給img標籤，也可以用作聲明字體。並且它不需要合成字體轉換格式，它是一個xml格式的文本文件，還可以在Sketch等矢量軟件中直接編輯。查看一下上面這個svg文件的內容：
主要內容是那一長串座標信息。
使用svg這種方案，避免了格式轉換，svg信息可以作為文本直接內嵌於程序中，不存在瀏覽器加載字體文件格式兼容的問題。簡單方便，依賴少，因此它是Web開發中圖標方案的首選。
這五種圖標方案，你認為微信小程序採用的是哪種方案呢？歡迎留言討論。
3）微信小程序圖標能不能自定義，如何使用阿里圖標庫？
默認圖標不夠用，又不想用圖片，有沒有方法自定義圖標？
如前面問題2所講，可以採用svg方案，在iconfont.cn網站上生成自己的svg文件，下載並在小程序中使用。
甚至在上面的代碼中，定義text標籤上的圖標：
可以直接改用icon標籤：
圖標是自定義的，但依然保持了代碼的優雅。
4）有時間真機上顯示icon空白，不正常顯示的問題
這是在社區上看到的問題，有人說類似下面這樣的代碼：
在直機上測試，icon顯示不出來。
這一看就是使用了自定義圖標。碼農親自以下面的代碼做了測試：
iPhone 6s直機上測試，可以，沒有問題。
沒有這種問題的原因，可能有兩個：
a）css font-face樣式裡聲明的字體文件，在安全域名裡，在本地不校驗域名的情況下可以訪問，在真機或真實環境中不行。
b）即使是真機，各種手機微信內嵌的瀏覽器內核也存有差異，不排除是字體文件的兼容性問題。可以將svg以外的字體格式全部刪除，尤其是排在前面的。
如果遇到了類似的問題，可以用這兩個方法試一下，如果仍然有問題，歡迎找我討論。
5）weui組件庫裡的icon組件的圖標，如何取出來，保存到本地？
這是 weui.io/#icons 裡的圖標樣式，有人覺得好看，想把文件拿出來用。有兩個方法：
a）通過谷歌瀏覽器開發者工具，定位到具體組件的樣式：
可以看到url指向的是一個內嵌的svg矢量圖數據。在新的tab頁中打開，可以直接保存為svg文件，在Sketch軟件中編輯。
b）weui的圖標，微信團隊給出了Sketch設計原稿，可以在這個頁面下載：
developers.weixin.qq.com/miniprogram/design/#設計
階段源碼：略。
關於icon，還有其它許多奇奇怪怪的問題。icon看以是一個小組件，卻也讓不少開發者頭疼過。有什麼問題，歡迎留言討論，也可以在群內討論。
2020年03月26日
