小程序本地iconfont工具开发

npm包:www.npmjs.com/package/min...

github: github.com/ahao430/min...

基于svgtofont开发。

背景:

平时小程序开发过程中,UI给的是一个个的svg,没有系统的iconfont维护。小程序端使用iconfont的话,首先要上传维护iconfont仓库,然后每次要转base64再下载,在项目中更新,比较麻烦。

在web端直接使用svg更加方便,如svg-sprite-loader,项目本地维护svg即可;但是小程序端svg只能作为图片使用。

思路:

svgtofont可以将本地的svg转成iconfont,但是看了文档,没有转成base64格式的选项,转base64的话,还是需要去iconmoon等网站工具。想到基于svgtofont生成的文件,继续转base64,再替换到css中,试验可行。

实现:

  1. svg转font

www.iconfont.cn/下载了几个svg图片,引入svgtofont,传入src和dist路径,运行报错,发现下下来的svg代码中包含xml的头部,删掉就成功运行。

安装svgo,先遍历svg目录,优化后svg头部去掉了。

再次运行,成果在dist目录生成iconfont的html,css,字体文件。

  1. font转base64

用fs.readFileSync读取ttf字体文件,再用Buffer.from(file).toString('base64')转成base64字符串。

查看网上手动转的base64格式iconfont的css,发现@font-face中,src的url换成了src: url("data:font/ttf;charset=utf-8;base64,xxxx")。读取css文件,用刚刚生成的base64字符串替换src中的部分,写到本地文件。

引入这个base64格式的iconfont.css文件,发现在小程序中可以正常使用class展示图片。也可以通过fontSize和color修改大小和颜色,说明转的base64格式可以正常使用。

  1. 导出base64的css

将刚刚写到本地的base64格式的字体css文件,复制到指定目录和文件名。

详细代码见github仓库。

相关推荐
Wiktok2 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~6 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号8 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌37 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹3 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6