1、訪問Iconfont-阿里巴巴矢量圖標庫，下載自己想要的圖片，下載svg格式備用

2、通過百度字體編輯器打開本地最新的uni.ttf文件(http://fontstore.baidu.com/static/editor/index.html#)，打開之后可以看到所有的uni所有圖標都在里面

3、導入第一步下載好的圖標，導入之后，可以看到在最后一頁的末尾已經有我們新增的圖標了

4、點擊設置代碼點，新增的圖標會按順序自動生成代碼

注意：先選中新增的圖標再設置，否則所有的圖標代碼都會改變（設置代碼點后可以點擊調整字形修改圖標名稱）

5、導出為ttf

6、將uniicons.tff文件轉為base64字符串，一樣通過在線轉換工具(https://www.motobit.com/util/base64-decoder-encoder.asp)

7、轉換完之后，需要去除掉換行，使用

在線過濾文本行所有換行 去除掉所有換行

8、將整理好的一行字符串替換掉uni-icons.vue文件中原有的base64字符串

9、在icons.js中增加圖標

10、使用

這時候就可以在引入組件之后，直接使用

<uni-icons type="company" size='20' class='input-uni-icon'></uni-icons>

總結

以上是生活随笔為你收集整理的uniapp图标_uniapp扩展自定义uniIcon组件图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。