Li Ming

Sketch 图标生成字体文件

网页中的图标,前端的解决方案,有几种:

  • 使用图片,如 jpg、png、gif
    • 优点:可以是五颜六色的图标,要多炫就多炫
    • 缺点:既然是图片,没法动态改变其中的颜色,因此换个颜色只能重新做一下图标;根据屏幕是否高清,可能需要准备多套图片;css sprite 如果手动来操作,要死人的(还好现在可以通过一些工具来完成);图片选错格式,占用空间极大;上线前还需要进行一次自动化压缩,避免有的人切的图体积过大
  • 使用svg
    • 优点:矢量图,体积小;支持渐变,支持彩色
    • 缺点:改变颜色,需要改 fill 属性,这个不能在 CSS 中完成
  • 字体文件
    • 也称作字体图标,这种技术简单来说就是把矢量图合并生成字体文件,然后在 CSS 中引用对应的字体编码即可渲染成图标
    • 优点:自由变化大小(高清屏无压力);自由修改颜色(纯色);可以添加一些视觉效果如:阴影、旋转、透明度
    • 缺点:不能有多种颜色的图标

综合来看,字体文件是不错的选择。

字体文件,业内比较有名的是 Iconfont-阿里巴巴矢量图标库IcoMoon。后者没玩过。

iconfont.cn

iconfont.cn 的图标库是不错的,可以从大量免费的图标库中选择适合自己的,生成一个字体文件下载了使用;如果没有合适的,还可以自己上传一个 svg 文件就行了,可以生成自己的图标库。

不过,需要从他们的网站下载一个 AI 格式的模板,并按照他们的要求去修改,最终导出一个 svg 文件去上传,详细介绍请参考:图标绘制

网红城堡的项目,目前是视觉设计师使用 Sketch 来进行 UI 设计,因此图标也是 Sketch 的。如果要到 iconfont.cn 上使用,还需要安装 AI,将 sketch 里的图标,导出到 AI 中使用,设计师感觉极为麻烦。

Sketch 到字体文件的转换

万能的 github 上找到了这个仓库:https://github.com/cognitom/symbols-for-sketch ,它的基本原理是将 sketch 文件转换成适合 web、iOS、Android 的图标库,web 端转换结束后是字体文件。

安装

  • 首先需要安装 npm(安装 nodejs 即可),前端工程师一般都有了
  • git clone 这个仓库到本地:git clone https://github.com/liaohuqiu/icon-font-for-multiple-platforms.git ./icon
  • 进入目录,执行 sh manage.h install,会下载依赖的 npm 模块

使用方法

  • 先修改 gulpfile.js 里的行 15,修改成你自己的 sketch 文件路径
    var sketch_file_name = ‘cube-icons-sample.sketch’;
    • 或者你自己的 sketch 干脆就叫 cube-icons-sample.sketch,拿过来覆盖掉根目录下的 cube-icons-sample.sketch
  • sh manage.sh make 打包 sketch 文件到 examples 目录
  • sh manange.sh open 使用默认浏览器打开预览

后续的工作就是不断维护 sketch 文件即可,感觉还是挺酷的

参考资料