技術概述
在uview中使用組件icon圖標.包括在某些場景下對文字的拓展，省去使用image組件。增加了產品的美觀性。包括Uview內置的圖標和自定義拓展的圖標。
技術詳述
基本使用
使用<u-icon>元素來調用已有圖標，使用name參數選擇圖標名。內置圖標可到uview官方網站查閱。
如要表示等級，可在網站找到
,使用如下：
<u-icon name="level"></u-icon>
效果如下：
修改樣式
通過color參數修改顏色，通過size參數修改圖標大小(rpx)，比如：
<u-icon name="level" color="#2979ff" size="28"></u-icon>
其他參數
拓展自定義圖標
-
進入阿里圖標庫的資源管理，發起一個項目，(記得勾選base64項）
添加自己需要的圖標，可以從別人的圖標庫引用，也可以自己上傳。修改這個圖標的前綴，這樣以后有新圖標加入的時候，不用每次頻繁修改前綴，在右上角的"更多操作"中，進入"編輯項目"。
修改"FontClass/Symbol 前綴"項為"custom-icon-"，修改"Font Family"為"custom-icon"，如下圖：
-
下載項目至本地
-
打開已下載文件夾
復制"iconfont.css"文件到uni-app目根目錄的static目錄后(也可以為其他目錄)，打開"iconfont.css"，刪掉下圖圈出的部分，記得把"src: url('data:application/x-font-woff2......"最后的逗號,改成分號;。
最終如下圖：
-
在項目根目錄的"App.vue"中，引入上述的"iconfont.css"，注意自己存放的路徑，且通過"@import"引入的外部樣式，為了兼容性建議使用相對路徑， 且引入的樣式，需要寫在style標簽有效內容中的最前面，如下：
/* App.vue */
<style>
/* 此處為style標簽內容的最前面 */
@import "./static/iconfont.css";
.view {
......
}
- 通過custom-prefix指定類名為custom-icon
<u-icon name="copy" custom-prefix="custom-icon"></u-icon>
- 圖標名稱為在阿里圖標庫中點擊"編輯圖標"時的"Font Class / Symbol"(該值可修改，每次修改都需重新下載"iconfont.css"放到uni-app目中， 覆蓋原來的"iconfont.css")
問題和解決
開發小程序時需要用的圖標不在內置圖標集里，需要用到拓展圖標。根據教程下載css文件后，並沒有找到圖標的base64格式。只好尋找文件轉換工具。
轉換 iconfont.ttf 文件為 base64格式
-
打開Transfonter網站（https://transfonter.org）
-
點擊 Add fonts 按鈕 添加 ttf 文件並設置選項
-
添加完成后點擊 Convert 按鈕轉換並下載文件
-
回到拓展自定義圖標的第4步。
流程
總結
小圖標的使用讓產品除了簡單的文字說明外，豐富了頁面內容。內置的圖標集涵蓋的內容已經不能滿足現在的開發需求，於是拓展圖標庫就派上了用處，但是官方的教程有時候不靈，無法實現圖標引用，最終才找到了解決方法。
參考文獻
uView官方網站（https://www.uviewui.com/）
參考博客：uni-app uView UI 擴展自定義圖標,作者：黃河愛浪