我报名参与金石计划1期应战——瓜分10万奖池，这是我的第2篇文章，点击查看活动概况

前语

作为大前端开发者必定经常运用很多小图标，运用小图标不可避免的要导入图片资源，图片资源又要考虑倍率、尺寸和色彩，总之体会欠安。为了处理这个问题 Iconfont 应运而生，不过原生运用体会还是不够好，本文意图就是优化开发体会。

什么是 IconFont

官方： 阿里妈妈 MUX 倾力打造的矢量图标办理、交流渠道。 设计师将图标上传到 iconfont 渠道，用户能够自定义下载多种格式的icon，渠道也可将图标转换为字体，便于前端工程师自由调整与调用。

可喜的是 Iconfont 是免费的，且支撑单色和多色。设计师能够开发自己的单色和多色图库，并以私有方法办理，供公司内部运用。

单色示例：

iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
多色示例：
iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon

为什么要运用 IconFont

运用图片资源的痛点：

  • 在不同设备上图片倍率不同，需求导入 2 倍和 3 倍图
  • 图片资源比较大，不利于包巨细操控
  • 同一图标不同色彩需求多张图
  • 图片资源办理起来简单显得紊乱

IconFont 特色：

  • Icon 以自定义字体的方法定义在字体文件里
  • 字体是矢量的，这意味着无论 Icon 的 size 是 20 * 20 还是 2000 * 2000 都不会失真
  • 像运用任何体系提供的字体一样，字体能够设置恣意色彩
  • 文件体积很小

经过以上剖析很简单得出结论：运用 IconFont 利益极大，不运用 IconFont 危害极大

Iconfont 运用方法

iOS 端官方推荐运用方法：

iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
我的榜首感觉是有些怪怪的，可也确实合理，这么用又心有不甘。

痛点整理：

  • 导入字体需求把字体相关文件导入工程，还要修改工程 info.plist 文件，这对多模块同享字体极不友爱。更无法接受的是这根本无法对字体进行版别办理
  • 创建 Font 时需求硬编码字体称号，对我来说不太能接受
  • label.text 赋值时是 unicode 码，可读性极低，完全不能接受
  • 更多时分咱们需求的是一张图片，运用 UILabel 显现一张图片不符合咱们的知识和习气

Iconfont 最佳实践

本着 IconFont 是个好东西，不能由于它当前存在的缺陷而抛弃它，应该尽量让它变得更加完美的主旨，对运用方法进行了一些优化。

以上一切痛点都有办法处理：

  • 导入字体必定要把字体文件导入主工程并修改 info.plist 文件吗？并不是
  • 创建 Font 时需求硬编码字体称号吗？并不是
  • label.text 赋值时必定要是 unicode 码吗？是的，不过咱们能够给它起个有意义的名字。
  • 更多时分咱们需求的是一张图片，能够把 Icon 转换为一张图片

问题剖析透彻了，那就开端寻找条件是否满足。

  1. 字体是能够动态加载的，能够经过以下代码完成字体动态加载
  2. 字体称号硬编码明显能够轻松处理
  3. 调查 iconfont.json 文件，证明 label.text 赋值时能够给 unicode 码起个有意义的称号
    iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
  4. 能够把 Icon 转换为一张图片

至此，以上一切痛点均已完美处理，下面是完整计划：

  1. 新建 CocoaPods 模块，用于多模块同享字体，指令：pod lib create BBIconFont
  2. 新建 json2swift.py 脚本文件，内容如下：
    iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
  3. 把下载来的 iconfont 文件夹拖入 Assets 目录
    iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
  4. 新增文件 UIFont+BBIconFont.swift，内容如下：
    iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
  5. 新增文件 UIImage+BBIconFont.swift，内容如下：
    iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon
  6. 履行脚本 python json2swift.py
  7. 脚本成功履行后会生成文件 BBIconNames.swift，内容如下：
    iOS IconFont 最佳实践 | 干掉图片资源，优雅地使用 Icon

事务代码中运用方法如下：

// 导入 BBIconFont 模块
importBBIconFont
​
// 获取 UIImage 目标，能够用于恣意适宜的当地
letimage=UIImage.if_image(BBIconNames.addasNSString)
// 获取 UIImage 目标同时指定巨细、色彩，能够用于恣意适宜的当地
letimage=UIImage.if_image(BBIconNames.add as NSString,size:16,color:.yellow)
​
// 字体方法运用
letlable=UILabel()
lable.font=UIFont.if_iconFont(16)
// 纯 Icon
lable.text="后边是个 Iconfont 字符: \(BBIconNames.add)"
lable.textColor=.yellow
​

小结

经过咱们的变通，最终能够像运用原生字体一样运用 IconFont，并能很好的对字体进行版别办理和同享。

最终给大家分享个观点：不要由于一个技能计划（大方向必须对，出发点是效能提高）当下的某些不完美而急于否定，而是应该首要考虑能否让它变得更加完美。