㈠ 微信小程序開發 | 如何在小程序中使用自定義 icon 圖標
題圖：來自 Unsplash.com
本文是微信小程序開發學習筆記。
微信小程序 icon 組件（標簽）只提供了 9 種類型的圖標，不能滿足開發或設計的個性化需求。為了解決這個問題，我們可以使用自定義的 icon 圖標，來豐富原有的圖標類型。
在微信小程序中使用自定義 icon 圖標有 6 種方法：
1.使用 icon 圖標（特指點陣圖）
2.使用 Sprite（精靈圖）
3.使用 CSS 樣式繪制（這種方法工作量大）
4.使用矢量字體
5.使用 SVG 矢量文件
6.使用 Canvas
本文只對第 4 種方法進行說明，因為除了第 1 種方法，其他方法我暫時還都不會。
使用矢量字體來自定義 icon 圖標，需要用到阿里巴巴圖標庫網站 Iconfont。
題外話，以前我一直以為這個網站只能用於設計，直到接觸了一些前端的知識，才知道它也能運用到編程中。
打開網站，選擇一個自己喜歡的圖標，將其添加到購物車，類似購物時將商品添加到購物車的操作，重復操作，將你喜歡的圖標一一添加到購物車中。
選擇好需要的所有圖標後，點擊右上角的「購物車」圖標。
瀏覽器右側會彈出一個面板，選擇「添加至項目」，如果你之前未曾創建過項目，這里就需要新建一個項目，新建項目其實就是新建一個文件夾。
將滑鼠移動到網頁頂部的導航欄「圖標管理」，在彈出的菜單中，點擊「我的項目」。
在我的項目中，點擊「查看在線鏈接」。
下方會出現一長串代碼，其中的 url 鏈接指向的就是存放在阿里雲伺服器的矢量字體，這些字體有不同的格式，如 ttf、woff、woff2，之所以需要用到不同的字體格式，是為了兼容不同的設備或系統。
接著點擊「點此復制代碼」，將代碼復制到系統剪貼板中。
回到微信小程序開發者工具中，將代碼粘貼到小程序頁面的 wxss 文件中，wxss 文件可以類比為普通網頁的 css 文件。
接著在 wxss 文件中進一步定義 icon 圖標的樣式，輸入以下的代碼：
font-family 指定我們嵌入的字體名稱，它需要與 @font-face 中 font-family 的值保持一致 ，color 設置圖標的顏色，font-size 設置圖標的大小。
icon-heart 和 icon-like 是自定義的類選擇器名稱（簡稱類名），你可以根據自己的喜好進行命名，這里的 icon-heart 代表愛心圖標，icon-like 代表點贊圖標。
content 指定圖標的 unicode 編碼，獲取圖標的編碼還需要回到 iconfont，將滑鼠移動到圖標上方，在彈出的菜單中，選擇「編輯圖標」。
在打開的頁面中，左下角的 4 位字元——e8ab，就是愛心圖標的 unicode 編碼，將其粘貼到 wxss 文件中對應的位置，並在字元前面加上一個反斜杠 \。
獲取點贊圖標的 unicode 編碼，也需要進行同樣的操作。
至此，就算完成了 wxss 樣式的編輯。
為了在小程序中看到圖標最終的渲染效果，我們還需要編輯一下 wxml 文件，wxml 相當於普通網頁的 html 文件。在 wxml 中使用 icon 標簽，輸入如下代碼：
這里的 class 屬性的值，就是對應 wxss 文件中自定義的類名，通過類名來應用相應的樣式。完成以上所有操作，最終的渲染效果如下：
搞得那麼費勁，就只為得到兩個小圖標。。。好像有點得不償失
擴展閱讀：
《 寫一個微信小程序的最少必要知識》
以上，希望有幫助。
References
[1] Iconfont: iconfont.cn/
歡迎關注
㈡ 解決小程序自定義圖標問題，一鍵批量生成圖標組件（Taro版）
無需贅述，直接來看效果
在Taro小程序開發過程中，你是否曾遭遇過圖標配置難題？iconfont的不便、字體圖標缺乏直觀性、顏色不可變、本地圖片圖標無法無損縮放，甚至阿里巴巴iconfont矢量圖標庫的服務不穩定，漸變色支持不足？這些問題迎刃而解，得益於taro-svg-icon-cli這個解決方案。
這個工具利用SVG（可伸縮矢量圖形）的特性，能直接生成圖標組件，它支持調整圖標大小和顏色，確保縮放時圖像質量不受損。無需依賴在線字體，只需本地SVG文件即可。taro-svg-icon-cli還利用svgo進行無損壓縮，生成的SVG XML代碼以內聯背景圖形式呈現，兼容性良好，大部分移動端應用均適用。
生成的組件具有明確的圖標名稱，支持代碼提示，目前僅針對支付寶、微信小程序進行了編譯。靈感來源於taro-iconfont-cli，但實現了本地化的圖標編譯。
使用起來相當便捷，安裝taro-svg-icon-cli，執行初始化命令生成配置文件，將SVG資源放入指定目錄，即可一鍵生成可使用的圖標組件，甚至支持生成TypeScript版本。雖然目前主要適用於微信、支付寶小程序，但擴展到其他小程序或Web端Vue、React應用也相對容易，我們歡迎社區貢獻代碼或fork。
想要了解更多？請訪問：github.com/leidenglai/t...