怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标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相关推荐
- 微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标 首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
- 微信小程序中使用阿里巴巴图标库
这里写自定义目录标题 微信小程序中使用阿里巴巴图标库 第一步 第二步 第三步 微信小程序中使用阿里巴巴图标库 第一步 阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
- 微信小程序引入阿里巴巴彩色图标字体(Symbol)
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...
- 在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压 第二步:进入https:// ...
- 在Vue项目和微信小程序中使用阿里图标
文章目录 在vue项目中正确使用iconfont的方法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...
- mpvue微信小程序中使用svg图标,并通过代码动态改变图标颜色
微信小程序,mpvue中使用svg图标,并通过代码改变图标颜色 本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同 ...
- 微信小程序中如何使用阿里iconfont图标库
iconfont官网 1.将自己需要使用的小图标加入购物车 2.在购物车中添加至项目, 点击查看样式在线链接 3.上图链接在浏览器中打开 4.在小程序创建font.wxss文件(文件名可随意起名),将 ...
- 在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹 把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
- 【小程序】小程序中使用阿里图标库
文章目录 1.学会在阿里图标库中图标添加进项目 2.引用图标库资源 1.学会在阿里图标库中图标添加进项目 相关文章 2.引用图标库资源 1.复制代码,浏览器搜索 2.搜素后复制代码,新建一个.wxss ...
最新文章
- Linux下进行Web服务器压力(并发)测试工具http_load、webbench、ab、Siege、autobench简单使用教程(转)...
- 华为开源构建工具_为什么我构建了用于大数据测试和质量控制的开源工具
- 超级计算机应用领域的概括,超级计算机进展的相关研究
- 团队项目第二周 - 需求规格说明书 - 天冷记得穿秋裤队
- Tinyalsa之mixer_ctl_set_value(十)
- 24.两两交换链表中的节点(力扣leetcode) 博主可答疑该问题
- 数据抓取软件火车采集器如何导入TXT 、EXCEL数据
- 但行好事 莫问前程(九月)
- 泰拉瑞亚服务器怎么修改密码,泰拉瑞亚账号系统功能使用说明 怎么绑定手机号...
- C语言编程:三(n)子棋游戏
- uboot源码学习(8)DDR内存时序参数
- HDU5761 Rower Bo
- 最好的Vue组件库之Vuetify的入坑指南(持续更新中)
- 笔记 - chalk 使用
- 豆瓣电影评分分析(数据分析)
- Lammps切削过程实现及工件表面识别
- c语言VK_SPACE什么意思,C语言,回车键: VK_RETURN (13) 后面的英文跟数字是什么含义,如何使用求解。。。...
- 怎么区分单线双线BGP线路的服务器?
- 【加强锻炼篇】如何进行科学有效的健身锻炼
- C语言程序设计谭浩强第五版复习梳理2
热门文章
- 被告知孩子学校偷钱后
- 知识星球的规划和落实!
- php m3u8转mp4
- 时代变了,互联网与房产开发商能否找到真爱
- JNI:ld: error: too many errors emitted, stopping now (use -error-limit=0 to see all errors)
- seata之jvm参数解析
- Altium Designer,设置一个器件或一个区域不做电气规则检查
- C++程序设计原理与实践 习题答案 第二十六章 第26章习题答案
- (前端)html与css,html 6、_a标签
- python中imag用法_花了一晚上时间,终于把Python的基本用法归纳好了!