uniapp图标_uniapp扩展自定义uniIcon组件图标

1、访问Iconfont-阿里巴巴矢量图标库，下载自己想要的图片，下载svg格式备用

2、通过百度字体编辑器打开本地最新的uni.ttf文件(http://fontstore.baidu.com/static/editor/index.html#)，打开之后可以看到所有的uni所有图标都在里面

3、导入第一步下载好的图标，导入之后，可以看到在最后一页的末尾已经有我们新增的图标了

4、点击设置代码点，新增的图标会按顺序自动生成代码

注意：先选中新增的图标再设置，否则所有的图标代码都会改变（设置代码点后可以点击调整字形修改图标名称）

5、导出为ttf

6、将uniicons.tff文件转为base64字符串，一样通过在线转换工具(https://www.motobit.com/util/base64-decoder-encoder.asp)

7、转换完之后，需要去除掉换行，使用

在线过滤文本行所有换行 去除掉所有换行

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

9、在icons.js中增加图标

10、使用

这时候就可以在引入组件之后，直接使用

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

总结

以上是生活随笔为你收集整理的uniapp图标_uniapp扩展自定义uniIcon组件图标的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。