主要是公司内部的 SVG 制作的图标, 提供网页当中使用的字体.
代码仓库在 https://github.com/jimengio/j...
字体生成步骤
从 SVG 文件到可以给前端用的 npm 模块, 主要经过:
- SVG 文件使用第三方模块生成字体文件(ttf, svg, woff...)
- 生成图标跟 CSS 的映射
- 生成 TypeScript 组件当中使用枚举类型
- 打包更新 npm 模块
生成字体文件跟 CSS 映射我们之前用的是 webfonts-generator,
不过这个模块已经停止维护了, npm 上的版本还是有 bug 的, 主分支的还好一点.
考虑到使用不方便, 一致在寻找替代方案. 在一丝的指导下切换到了 font-carrier.
font-carrier 可以生成字体, 以及基础的 CSS 文件.
不过跟 webfonts-generator 不一样的是生成的 CSS 不要 class 来区分图标,
而是用 HTML 当中 utf8 字符直接跟图标字体对应... 当然原理跟以前一样..
<i
dangerouslySetInnerHTML={{ __html: `&#${fontsDict[props.name]}` || `NONE:${props.name}` }}
></i>
生成字体文件的代码就是调用 font-carrier 的 API,
另外自己记录了一个 dict
JSON 对象, 用来存储码表...
initialFontValue = 0xe000
String.fromCharCode(initialFontValue)
fonts = fontCarrier.create()
dict = {}
icons.forEach (icon) ->
initialFontValue += 1
char = String.fromCharCode initialFontValue
fonts.setSvg(char, fs.readFileSync("./svg/#{icon}.svg").toString())
dict[icon] = initialFontValue
fonts.output
path: './src/fonts/jimo'
然后主要是生成类型文件的工作.. 基于 dict
数据生成 enum
, 基本够用.
遇到的坑
使用 font-carrier 过程当中有遇到一些问题, 联系维护者解决掉了,
- 图标形状奇怪
遇到一个圆弧反向的问题, 本来不知道怎么下手, 用 Glyphs 看了 TTF 文件的线条,,
注意到所有的线条跟原先的 SVG 在 Sketch 里面刚好反向了, 就怀疑是转的问题,
SVG 的 arc 圆弧有一个 SWEEP 值, 表示圆弧的方向, 就觉得是这个用错了.
维护者排查了一下, 是已知的问题, 在 svgpath 模块当中已经解决:
https://github.com/fontello/s...
最后靠升级依赖的版本解决掉了, 按说后续不会再遇到.
- 图标居中出现问题
图标对应的是 UTF8 的字符, 最开始我选择的数值比较小, 主要跳过常用的码位.
不过当时出现了问题, 就是图标左右居中不正常, 有很多明显往左边偏移...
排查以后原因是选择的码位范围有问题, 刚好命中了一些奇怪的字符...
维护者推荐的码位范围是 0xe000
以上, 我估计对应的是空白的 UTF8 码位. 解决了.
- 曲线闭合问题
从接手项目的时候就提到了 SVG 的图标需要曲线闭合,
不是完全懂什么意思, 估计是路径要求闭合, 方便字体填充颜色之类的.
设计师没处理好的话, 图标是显示空白的. 用 https://iconfont.cn 可以验证.
其他
另外一丝推荐的方案是我们设计师直接用 https://www.iconfont.cn 维护.
工具上可以提供 CSS 还有码位的导出, 比起我们手工处理要省事一点.
没想清楚, 后续如果有契机而且设计师可以维护的话, 考虑是否迁移过去.
其他关于积梦前端的模块和工具可以查看我们的 GitHub 主页 https://github.com/jimengio .
目前团队正在扩充, 招聘文档见 GitHub 仓库 https://github.com/jimengio/h... .
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。