uniapp圖標_uniapp擴展自定義uniIcon組件圖標

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

95ff87c1f3292363f7bf0c9ae9f4255d.png

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

f36fee614d56b457e1258a050263ab49.png

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

759a76701a6462a52d9776eb5260d3c3.png

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

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

e9025cfafa2b0f702a26a266e8a602f8.png

5、導出為ttf

cd4abd2fc4d8ae6ef5c937ff4c865253.png

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

f754352d058fac339ead756489fb595f.png

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

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

78996f659de43daf90cd7bcd7682c644.png

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

e14ce45caa42de57318511aa668619b0.png

9、在icons.js中增加圖標

1105e587164cf24bf47e4a6e0d57e302.png

10、使用

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

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/537201.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/537201.shtml
英文地址,請注明出處:http://en.pswp.cn/news/537201.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

asp.net面試集合

1 &#xff1a;維護數據庫的完整性、一致性、你喜歡用觸發器還是自寫業務邏輯&#xff1f;為什么 答&#xff1a;盡可能用約束&#xff08;包括CHECK、主鍵、唯一鍵、外鍵、非空字段&#xff09;實現&#xff0c;這種方式的效率最好&#xff1b;其次用觸發器&#xff0c;這種方…

Spring Boot 日志的使用及logback.xml的使用

當前是市場上使用的日志框架有很多&#xff0c;比如&#xff1a;JUL、JCL、Jboss-logging、logback、log4j、slf4j....等等&#xff1b; 但是日志主要分為兩類&#xff0c;日志門面和日志實現兩類&#xff1b;日志門面可以說是日志框架的抽象層&#xff0c;主要實現是的日志實…

基4fft算法的蝶形圖_原地且自動整序的FFT算法

傳統的計算快速傅里葉變換的Cooley-Tukey算法效率極高&#xff0c;因其主要由蝶形運算構成&#xff0c;所以代碼形式也非常簡單&#xff0c;只是需要將輸入或者輸出按照位反轉的方式重新排序。這個重新排序的步驟并不是必須的。Clive Temperton于1991年在Self-Sorting In-Place…

嵌入式BootLoader技術內幕(二)

三、Boot Loader 的主要任務與典型結構框架 在繼續本節的討論之前&#xff0c;首先我們做一個假定&#xff0c;那就是&#xff1a;假定內核映像與根文件系統映像都被加載到 RAM 中運行。之所以提出這樣一個假設前提是因為&#xff0c;在嵌入式系統中內核映像與根文件系統映像也…

MongoDB數據庫的遷移

最近公司開始要換服務器啦&#xff0c;MongoDB上面的數據又得遷移&#xff0c;還是記錄一下比較好。 1&#xff09;、將MongoDB的壓縮包解壓至相對應的路徑(壓縮文件在本地服務器的地址192.168.0.22的/opt/zip文件下面) 2&#xff09;、配置好mongodb.conf文件&#xff0c;配…

excel vba 如何將日期周幾轉換成文字_這5個超實用的Excel技巧,讓你的辦公效率更高...

導讀&#xff1a;對于辦公職員來說&#xff0c;Excel是幾乎每天都會接觸的辦公軟件。在Excel中&#xff0c;有非常多的小技巧&#xff0c;學習這些小技巧需要不斷的積累和應用&#xff0c;今天指北針就來給大家分享5個超實用的Excel技巧&#xff0c;讓辦公變得更加有效率。文/芒…

VMware創建Linux及局域網內獨立訪問IP和訪問外網IP的配置

好早之前有一篇是配置遠程連接Linux和部署Tomcat的文章&#xff0c;但是并沒有講解如何配置IP的相關知識。最近公司在搞集群配置&#xff0c;我就先拿電腦上的VMware上的Linux做個測試&#xff0c;分享和總結一下經驗吧&#xff0c;也算是為了補齊之前的那個空白&#xff01; …

每位設計師都應該擁有的50個CSS代碼片段

每位設計師都應該擁有的50個CSS代碼片段

C#淺拷貝與深拷貝區別

也許會有人這樣解釋C# 中淺拷貝與深拷貝區別&#xff1a; 淺拷貝是對引用類型拷貝地址&#xff0c;對值類型直接進行拷貝。 不能說它完全錯誤&#xff0c;但至少還不夠嚴謹。比如&#xff1a;string 類型咋說&#xff1f; 其實&#xff0c;我們可以通過實踐來尋找答案。 首先&a…

內網安裝nginx+keepalived環境配置及簡單使用

分享一下這次艱難的配置過程&#xff0c;銜接上一篇的配置內網獨立IP虛擬機。 先吐槽一波&#xff0c;由于公司網絡屬于內網&#xff0c;與外網互不相通&#xff0c;所以在安裝nginx的時候可能會去外網找相對應rpm文件&#xff0c;而且也有許多的版本不兼容問題&#xff0c;好…

cad連續標注數字123怎么弄_實例講解CAD模型與布局中的各種比例

好課推薦&#xff1a;零基礎CAD&#xff1a;點我CAD室內&#xff1a;點我 周站長CAD&#xff1a;點我CAD機械&#xff1a;點我 Bim教程&#xff1a;點我CAD建筑&#xff1a;點我CAD三維&#xff1a;點我全屋定制&#xff1a;點我 ps教程&#xff1a;點我蘋果版CAD:點我 3dmax教…

SpringMvc異步請求的使用及部分原理

最近隔壁項目組的項目又出問題了&#xff0c;一直被用戶投訴太卡了&#xff0c;頁面白屏的那種&#xff0c;打開源代碼一看&#xff0c;全是非異步請求&#xff0c;類似于以下寫法&#xff1a; ResponseBodyRequestMapping(value "/getTest")public String getTest(…

Microsoft BizTalk ESB Toolkit 2.0

[>>> 更多<BizTalk開發系列>文章 ] 微軟于6月8號發布了BizTalk Server 2009企業集成平臺的最后一個功能組件:ESB Toolkit 2.0 (原名:ESB Guidance 2.0)&#xff0c;ESB ToolKit 2.0一個是工具和代碼集擴展了BizTalk Server 2009對于松耦合和動態消息架構的支持…

python解釋器環境中用于表示上一次運算結果的特殊變量_判斷正誤 PUSH CL_學小易找答案...

【單選題】將數學關系式2 【填空題】請用4位十六進制寫出每條指令結束后AX的值。 MOV AX, 0 DEC AX ADD AX, 7FFFH ADC AX, 1 NEG AX OR AX, 3FDFH AND AX, 0EBEDH XCHG AH, AL SAL AX, 1 RCL AX, 1 【判斷題】判斷正誤 MOV DX, 09H 【判斷題】判斷正誤 MOV [1200H], [SI] 【單…

Java線程的使用及共享協作

創建線程的三種方式 1、繼承Thread&#xff1b; static class MyThread extends Thread{Overridepublic void run() {//do something...} } public static void main(String[] args) throws InterruptedException {MyThread thread new MyThread ();thread.start(); } 2、實…

WCF學習筆記(三):開啟net.tcp端口

正在做一個使用tcp協議的WCF示例&#xff0c;遇到很多問題。首當其沖的問題就是——如何為WCF打開tcp端口。。。 具體步驟如下&#xff1a; 1、在IIS中為WCF安裝支持TCP協議的組件&#xff1a; 2、在防火墻的入棧規則中開啟808端口&#xff1b; 3、在servies.msc中打開兩個服務…

孿生神經網絡_軒轅實驗室:數字孿生:基于機器學習的汽車數字孿生模型

本文來源&#xff1a;A. Rassolkin, T. Vaimann, A. Kallaste, and V. Kuts, “Digital twin for propulsion drive of autonomous electric vehicle,” in 2019 IEEE 60th International Scientific Conference on Power and Electrical Engineering of Riga Technical Univer…

Java線程Fork/Join思想及實現

最近在看線程這一塊的東西&#xff0c;所以之前的那篇文章就是用來記錄的&#xff0c;但看起來好簡單的樣子&#xff0c;哈哈哈&#xff01; 這兩天看的是Fork/Join 分而治之的思想&#xff0c;Doug Lea大師的JUC還是挺強的&#xff0c;學并發編程應該沒有人不知道這個大佬吧&…

Sgen.exe: Speed up XmlSerializer's Startup Performance [.NET 2.0, XML Serialization]

Sgen.exe: Speed up XmlSerializers Startup Performance [.NET 2.0, XML Serialization] Written by Allen Lee 1. Why Sgen.exe? 在《Serialize Your Deck with Positron [XML Serialization, XSD, C#]》一文中&#xff0c;我們領略到 XML Serialization 是如何簡化我們的 X…

Java線程并發常用工具類使用

這次整理了一些比較常用的線程工具類啦。 CountDownLatch&#xff1a;在一組線程執行完后&#xff0c;才能開始執行調用等待的線程。上片文章提到過junit的測試盡量不要測試線程&#xff0c;如果硬是要可以使用CountDownLatch進行測試 CyclicBarrier&#xff1a;在一組線程中…