給uni-icons添加自定義圖標


背景

當一個項目對界面有要求的時候,uni-app中的圖標庫遠遠不及所需,倘若都使用靜態資源調用,對其大小顏色的控制又不太盡人意,最方便的就是更改uni-icons自定義字體的鏈接。記錄該過程方便以后查看。

知識儲備

  • 【ttf文件】:一種字體文件表示方式,將字體輪廓轉換成曲線,可以對曲線進行填充,制成各種顏色和效果等,這也是為什么可以對圖標進行顏色和大小的更改。
  • 【加載自定義字體】:通過Weex提供的DOM.addRule進行加載,以下是官方介紹:

Weex官方介紹addRule

步驟

  1. 將自定義的圖標上傳到【阿里字體圖標庫】,這里要以SVG格式上傳。不管是自制的圖標,還是借鑒的圖標,都需要將代碼下載下來,接下來將用到ttf文件
  • 上傳自制圖標

  • 下載字體代碼

  1. 進入uni-app官方圖標界面,打開控制台Network模塊,過濾出字體的請求信息,點擊下載ttf文件
  • 截獲的字體文件
  1. 找一個在線字體編輯器(我用的是FontStore字體編輯器),打開uno-icons的ttf文件,上傳自定義的ttf文件,這時在圖標界面就能看見自定義的圖標,再將添加完畢的字體文件以ttf的格式下載出來
  • 打開uni-app圖標庫

  • 下載更新后的ttf文件

  1. 獲取下載的ttf文件,將項目中的文件替換掉,若以base64讀取,通過在線Base64解碼器和編碼器將文件編碼成base64碼后在進行替換,注意去掉base64碼的空格和換行(使用Notepad,很方便)
  • 編碼過程

  • 去空格和換行

  1. 將【字體編輯器】上傳圖標的Unicode碼添加到項目中,以便調用
  • 添加Unicode碼

參考

godferyZhu前輩的uni-icons中添加自定義圖標


免責聲明!

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



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