当前位置:   article > 正文

uview 使用自定义图标_uview怎么使用图片作为图标

uview怎么使用图片作为图标

资料准备

  1. 阿里字体图标库

  2. 查阅文档:uni-app 的自定义图标 u-icon

在这里插入图片描述

操作
1. 下载svg格式的文件(如果是png等图片,先将图片转svg
2. 上传svg文件到阿里字体图标库

在这里插入图片描述
在这里插入图片描述
根据需求填写(这里选择上传到项目)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 下载解压缩,修改 iconfont.css 文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4. 最后效果:

在这里插入图片描述

5. 项目中引入文件

在这里插入图片描述

6. 图标库使用
 <u-icon
	custom-prefix="custom-icon"
	name="range" 
	color="pink"
></u-icon>
  • 1
  • 2
  • 3
  • 4
  • 5
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/251083
推荐阅读
相关标签
  

闽ICP备14008679号