uni-app為組件uni-icons增加自定義圖標(超簡單)


1、找到需要的圖標,這里我是在阿里巴巴圖標庫(https://www.iconfont.cn/)中找到對應的圖標

下載為svg格式備用:

 

 

 

2、通過在線ttf編輯器打開uni.ttf文件(http://fontstore.baidu.com/static/editor/index.html#),打開之后可以看到所有的uni所有圖標都在里面

 

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

 

 

 

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

注意:先選中新增的圖標再設置,否則所有的圖標代碼都會改變

 

 

 

 5、導出為ttf,然后修改名稱,替換掉項目中的uni.ttf文件

 

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

 

 7、轉換完之后,需要去除掉換行,因為該工具默認一行76字符,借助一下文本編輯器即可,這里我使用的是Notepad++

 

 

 

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

 

 9、在icons.js中增加圖標

 

 

然后就可以愉快的使用自定義圖標了,完美收工!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM