怎么在小程序中使用彩色图标iconfont国际惯例,先上图:概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷。但是当我需要将项目迁移的小程序的时候,就遇到了很多问。iconfont 字体怎么引入?不支持 dom 操作,字体怎么操作?彩色字体怎么使用?各种问题困扰着我们,我们可能会有各种折中的方案,比如线上字体 CDN 引入,字体 base64,雪碧图等等。全新的方式 iconfont-tools 快速生成彩色图标库https://github.com/HuaRongSAO/iconfont-tools欢迎点赞npm i -g iconfont-toolscd project/asset/font_hiytajitqeu // 进入图标文件所在文件夹iconfont-tools // 生成小程序专用文件生成目标文件:.└── font_hiytajitqeu ├── demo.css ├── demo_index.html ├── iconfont.css ├── iconfont.eot ├── iconfont.js ├── iconfont.svg ├── iconfont.ttf ├── iconfont.woff └── iconfont.woff2 ├── iconfont-weapp # 目标文件夹 │ ├── icon # 生成原生的icon组件库 │ │ ├── icon.js │ │ ├── icon.json │ │ ├── icon.wxml │ │ └── icon.wxss │ ├── iconfont-weapp-icon.css # 包含彩色图标的css │ └── iconfont-weapp-icon.wxss # 包含彩色图标的wxss最后:方式一:引入小程序项目: @import ‘/your/path/font_hiytajitqeu/iconfont-weapp/iconfont-weapp-icon.wxss’方式二:注册组件:“icon”: “/your/path/font_hiytajitqeu/iconfont-weapp/icon”其他小程序框架,taro,wepy,mpvue 等等,可以直接通过引入iconfont-weapp-icon.css文件,实现。原理实现原理主要是通过 SVG 作为背景图进行实现的。一般我们实现一张图标的实现方式是通过 base64 作为背景图实现实现的如下图.icon { width: 20px; height: 20px; background: url(data:image/svg+xml;base64, PHN2ZyB2ZXJza..) no-repeat center; background-size: 100%;}但是通过 base64 位生成背景图,有个小问题,主要是因为 base64 算法的问题,会增加代码的数量从而增加文件大小。简单原理:大概就是字符串的 3 个字符转化成 4 位字符通过 base64 加密后会使文件大小增加 2,30%于是就有了新的引入方式:SVG 直接内联.icon { width: 20px; height: 20px; background: url(svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 200 200″path fill=”#00A5E0″ d=”M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z”//svg’) no-repeat center; background-size: 100%;}这不就很完美了嘛!可惜在存在兼容性问题,在 IE 就可能无法线上了。那问题出在哪?”,%,#,{,},,这些特殊符号。找到了问题,那解决方式就有了,encodeURIComponent对数据进行 url 编码。.icon { width: 20px; height: 20px; background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20versi…) no-repeat center; background-size: 100%;}这样 svg 的显示方案就做好了。从 iconfont 中提取我们需要 SVG下载解压完毕的 iconfont 一般长这样其中 svg 的代码,在 iconfont.js 和 iconfont.svg 两个文件通过详细对比和仔细阅读源码,发现答案就在 iconfont.js 里面图中画红框的位置,就是 svg 的全部源码了。那么实现方式就很明朗了找到对应的svg标签 == 提取标签 === encodeURIComponent 编码标签 == 生成css文件好的大功告成!那么问题来,工具怎么下载?https://github.com/HuaRongSAO/iconfont-tools蟹蟹相关阅读:张鑫旭:CSS 中内联 SVG 图片base64
怎么在小程序中使用彩色图标iconfont
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 怎么在小程序中使用彩色图标iconfont
相关推荐
支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouc安国市E企盈小程序hEnd)
瑶海区E企盈小程序微信小程序错误码参考
小程序基永兴县E企盈小程序础
微信小程序开发坑背景图之微博图西华县E企盈小程序床
【每日p疏勒县E企盈小程序ython小程序练习】第一天:将你的QQ头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果。
小程序开发小望江县E企盈小程序程序的组成
增值税伊春区E企盈小程序发票二维码内容字段解析
微信第三方开放平台代小程序微信公众号开发返回的错误码小河区E企盈小程序大全
天台县E企盈小程序微信errcode大全
如何获武城县E企盈小程序取微信小店小程序的AppID
小弥勒县E企盈小程序程序中上传图片并进行压缩(二)
小程序图片不显弥勒县E企盈小程序示的解决方法
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务