在日常的设计工作中，icon 是离不开的设计元素，通常会下载一些 icon 素材文件。当使用时，打开素材文件，然后把要使用的 icon 粘贴到 Sketch 中。但是，当你有大量的 icon 素材时，想要管理和查找 icon 就变得十分困难了。Sketch Iconfont 可以帮我们很好来管理我们的 icon 素材。
在介绍这个 Plugin 之前，我们需要先了解一个概念，图标字体 (IconFont)。简单来说，就是将图标生成为字体文件，和平时使用的字体文件是一样的。IconFont 一般应用在前端开发当中，在 CSS3 中被引入，将图标当做文字显示，可以很大程度上解决图标显示以及屏幕适配的问题。目前也有很多成熟的 IconFont 可以供我们直接使用，当然你也可以自己制作 IconFont 来供自己使用。
Sketch Iconfont 就是可以在 Sketch 中方便的使用和管理 IconFont 的 Plugin。
安装
- 下载并解压：sketch-iconfont-master.zip
- 双击 iconfont.sketchplugin 完成安装
PS，也可以使用第三方 Plugin 管理工具安装，安装方法可以参考 「从Sketch 45 版本发布，聊一聊 Plugin 的管理」
使用方法
安装 Font Bundle
安装好 Sketch Iconfont 之后，你会发现，这个 Plugin，还不能使用。既然是管理 IconFont 的 Plugin，第一件事情就是要先安装 IconFont，然后才能进行管理。Plugin 的作者为了方便使用，提供了一个 Font Bundle， 里面包括了多个比较热门的 IconFont，安装后就可以使用了。
- 下载并解压： font-bundles-master.zip
- 打开 ttf-files 文件夹，依次安装里面的字体
- 打开 Sketch，点击 Plugins -> Icon Font -> Install a Font-Bundle
- 在弹出的对话框中，选择 font-bundles-master 文件夹，然后点击 Open
现在就可以正式开始使用 Sketch Iconfont 了。
插入 icon
打开 Sketch，点击 Plugins -> Icon Font -> Grid Insert 然后选中其中一个 IconFont，就可以看到这个 IconFont 所包含的所有 icon 了。点击一个需要的 icon，就插入到 Sketch 中了。可以通过搜索关键字，来找到自己想要的 icon。
点击 Plugins -> Icon Font -> All Insert，可以查看所有已经安装的 IconFont。
icon 转曲
通过 Sketch Iconfont 插入到 Sketch 中的 icon，此时是被当做文字对象来处理的，你可以更改文字的大小，来改变 icon 的大小，但是我们有时候，更多的是以一个矢量对象来处理 icon，此时就要进行转曲的操作。
1. 可以通过 Sketch 自带的命令进行转曲，选中要转曲的 icon，点击 Layer -> Convert to Outlines 或者点击快捷键 Shift ⇧ + Command ⌘ + O
2. 可以使用 Sketch Iconfont 自带的命令进行转曲，选中要转曲的 icon，点击 Plugins -> Icon Font -> Convert Icons [Outlines]
制作自己的 IconFont
如果现成的 IconFont 无法满足我们的需求，我们可以自己制作 IconFont，将我们自己设计的 icon 或者收集的 icon 素材，都放到 Sketch Iconfont 来管理。Plugin 作者也提供了视频教程。
1. 将需要制作成 IconFont 的 icon，导出为 SVG 格式的文件。
2. 访问 Fontello 网站，将导出的 SVG 格式的 icon，拖入到网站中。
3. 在网站最上面的 Custom Icons 的 tab 中，可以看到导入的 icon，选中自己需要的 icon，再右上角输入自己想要的 Font 名称，之后点击旁边的 Download webfont 按钮。
4. 将下载下来的文件进行解压，打开 font 文件夹，安装 .ttf 后缀的字体到电脑中。
5. 打开 Sketch ，点击 Plugins -> Icon Font -> Install / Remove -> Install a Font [SVG]，在弹出的对话框中，选择 font 文件夹中的 .svg 后缀的文件，点击 Open。
现在，就可以通过 Sketch Iconfont 来插入你自己制作的 IconFont 了。
删除 IconFont
如果想要删除之前导入的 IconFont，点击 Plugins -> Icon Font -> Install / Remove -> Remove a Font，在弹出的对话框中，选择想要删除的 IconFont，点击 Remove this font，就可以删除了。
导出 Font Bundle
还记得我们安装过 Plugin 作者提供给我们的 Font Bundle 吗？ Font Bundle 是为了方便同时导入多个 IconFont，而不用一个一个字体的导入。我们可以通过导出自己的 Font Bundle，来备份我们安装过的 IconFont，也可以分享给自己的小伙伴或者同事。
点击 Plugins -> Icon Font -> Install / Remove -> Export your Font Bundle，在弹出的对话框中，选择要导出 Font Bundle 的目录位置，点击 Open。
然后，将导出的 Font Bundle 文件夹，分享给需要的小伙伴就可以了，使用方法和上面提到安装 Plugin 作者提供的 Font Bundle 是一样的。
PS，导出的 Font Bundle，是不包含字体文件的，记得从字体册中，将字体文件拷贝出来。否则安装了 Font Bundle，也是无法使用的。
总结
Sketch Iconfont 通过 IconFont，提供了一个很好的 icon 使用和管理的解决方案。不仅可以安装使用现有的 IconFont，也可以使用自己制作的 IconFont 。从而将之前 Sketch 的 icon 素材，都统一管理起来。通过导出 Font Bundle，还可以达到备份功能，或设计团队间的协作需求。
更多 Sketch 使用技巧和实用插件推荐，欢迎前往少数派 探索 Sketch 专栏查看。
被安利了那么多效率「神器」，有多少放在那边吃灰？由少数派编辑部出品的 Power+ 栏目现已上线🚀
