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.mzph.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;在一组线程中…