IconFont 生成工具
date
Sep 1, 2022
slug
iconfontgeneratetool
status
Published
tags
BiBoom
summary
IconFont 生成工具
type
Post
用过字体图标的朋友应该对 IconFont 不会陌生，设计师通过将 svg 上传到 IconFont，通过 IconFont 的处理就能获取一组文件。这些文件可以用在 Android、iOS、Web 上，以此来实现通过字体控件展示图标的需求。
.
├── demo.css
├── demo_index.html
├── iconfont.css
├── iconfont.eot
├── iconfont.js
├── iconfont.json
├── iconfont.svg
├── iconfont.ttf
└── iconfont.woff
0 directories, 9 files这种通过文字控件展示图标的好处有几个：
- 降低对资源文件的管理成本；
- 降低资源文件占用空间；
- 矢量图标不会导致在高分辨率的屏幕上造成图标失真的问题；
- 便于统一替换 Icon；
我所了解到的在使用这种方案的也都是在使用 IconFont 的解决方案，不过前段时间恰逢 IconFont 升级系统导致超过 2 周时间无法访问 IconFont。这个时候如果有一套自己的系统能及时启用那是最好不过了。svgtofont 就是这样的一个工具。
不过这个还是得写一些 JavaScript 代码才能好好使用，秉承着站在巨人的肩膀上看世界的思想。另一位开发者也分享了自己的实现 svg-iconfont，通过 svg-iconfont 可以做到开箱即用。
首先 clone 下 svg-iconfont 这个仓库，然后按照作者的 README 操作即可。不过个人感觉还可以再做一些工作：
- 支持设置起始 Unicode；
- 现在 svg-iconfont 的版本生成的文件中没有对所有字体的说明性文件，可以导出一份 json 以供在 Android、iOS 平台使用；
- 有可视化操作的页面，这样一来面对设计人员的使用也很友好；
如果你有 JavaScript 的开发能力还请多多贡献，让他成长起来。
如果你觉得还行，就请给一个赞，3 连我也不介意。ღ( ´･ᴗ･` )
