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,一经查实,立即删除!

相关文章

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

当前是市场上使用的日志框架有很多&#xff0c;比如&#xff1a;JUL、JCL、Jboss-logging、logback、log4j、slf4j....等等&#xff1b; 但是日志主要分为两类&#xff0c;日志门面和日志实现两类&#xff1b;日志门面可以说是日志框架的抽象层&#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; …

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对于松耦合和动态消息架构的支持…

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…

三维图形几何变换算法实验_计算机视觉方向简介 | 深度学习视觉三维重建

点击上方“计算机视觉life”&#xff0c;选择“星标”快速获得最新干货作者&#xff1a; Moonsmilehttps://zhuanlan.zhihu.com/p/79628068本文已由作者授权&#xff0c;未经允许&#xff0c;不得二次转载三维重建意义三维重建作为环境感知的关键技术之一&#xff0c;可用于自动…

PNG图片详解

1、PNG图片类型 PNG格式有8位、24位、32位三种&#xff0c;下面是一些术语&#xff1a; 索引透明&#xff1a;类似于GIF&#xff0c;某一像素只有全透和全不透明两种效果Alpha透明&#xff1a;半透明PNG8 8位的PNG最多支持256&#xff08;2的8次方&#xff09;种颜色&#xff0…

java 删除二维数组中的null_避免在Java中检查Null语句

1.概述通常&#xff0c;在Java代码中处理null变量、引用和集合很棘手。它们不仅难以识别&#xff0c;而且处理起来也很复杂。事实上&#xff0c;在编译时无法识别处理null的任何错误&#xff0c;会导致运行时NullPointerException。在本教程中&#xff0c;我们将了解在Java中检…

simulink显示多个数据_如何在 Simulink 中使用 PID Tuner 进行 PID 调参?

作者 | 安布奇责编 | 胡雪蕊出品 | CSDN(ID: CSDNnews)本文为一篇技术干货&#xff0c;主要讲述在Simulink如何使用PID Tuner进行PID调参。PID调参器( PIDTuner)概述1.1 简介使用PID Tuner可以对Simulink模型中的PID控制器&#xff0c;离散PID控制器&#xff0c;两自由度PID控制…

Java并发编程之堵塞队列介绍以及SkipList(跳表)

堵塞队列 先了解一下生产者消费者模式&#xff1a; 生产者就是生产数据的一方&#xff0c;消费者就是消费数据的另一方。在多线程开发中&#xff0c;如果生产者处理速度很快&#xff0c;而消费者处理速度很慢&#xff0c;那么生产者就必须等待消费者处理完&#xff0c;才能继…

Java并发编程之线程池ThreadPoolExecutor解析

线程池存在的意义 平常使用线程即new Thread()然后调用start()方法去启动这个线程&#xff0c;但是在频繁的业务情况下如果在生产环境大量的创建Thread对象是则会浪费资源&#xff0c;不仅增加GC回收压力&#xff0c;并且还浪费了时间&#xff0c;创建线程是需要花时间的&…

Java并发编程之线程定时器ScheduledThreadPoolExecutor解析

定时器 就是需要周期性的执行任务&#xff0c;也叫调度任务&#xff0c;在JDK中有个类Timer是支持周期性执行&#xff0c;但是这个类不建议使用了。 ScheduledThreadPoolExecutor 继承自ThreadPoolExecutor线程池&#xff0c;在Executors默认创建了两种&#xff1a; newSin…