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

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

前语

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

什么是 IconFont

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

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

单色示例：

为什么要运用 IconFont

运用图片资源的痛点：

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

IconFont 特色：

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

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

Iconfont 运用方法

iOS 端官方推荐运用方法：

痛点整理：

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

Iconfont 最佳实践

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

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

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

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

1. 字体是能够动态加载的，能够经过以下代码完成字体动态加载
2. 字体称号硬编码明显能够轻松处理
3. 调查 iconfont.json 文件，证明 label.text 赋值时能够给 unicode 码起个有意义的称号

   

4. 能够把 Icon 转换为一张图片

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

1. 新建 CocoaPods 模块，用于多模块同享字体，指令：pod lib create BBIconFont
2. 新建 json2swift.py 脚本文件，内容如下：

   

3. 把下载来的 iconfont 文件夹拖入 Assets 目录

   

4. 新增文件 UIFont+BBIconFont.swift，内容如下：

   

5. 新增文件 UIImage+BBIconFont.swift，内容如下：

   

6. 履行脚本 python json2swift.py
7. 脚本成功履行后会生成文件 BBIconNames.swift，内容如下：

   

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

// 导入 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，并能很好的对字体进行版别办理和同享。

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