什么

我们通常看到的图标是以图像的形式集成到项目中的，但它是一组字体图标，这与我们使用自定义字体的方式相同，是一种矢量图标。

这

计算机中显示的图形一般分为两类——位图和矢量图像，我们通常使用的JPEG、PNG等图片是位图格式，即用像素表示的图像，矢量图像是用点、线、多边形等数学方程式的几何元素表示的图像，与位图相比，矢量图形的优点是体积小sketch如何安装icon，放大和缩小不会失真，这个优点可以给项目带来很大的好处，但缺点是它不能用来表现色彩层次丰富的图像，因此，一些复杂的图形仍然需要位图来表现。恰好我们的项目是模块化的，当不同的模块使用同一个图片时，尤其是这种基本的图标，将多个副本复制到各自的模块中并不是很优雅，使用它们可以很好的解决。

优点和缺点 如何制作

首先，你得有一套完善的图标库，如下图，这里我们选择将这些图标作为容器来维护，毕竟它是一个相对容易使用的工具，注意制作矢量图形还是需要一个设计师的，否则一些坑让你踩上去。不管 AI 或其他矢量绘图软件制作的图标，我们最终都放到了这个文件中，后续的更新会一一添加。

可以看出，其实它们都是一些基本的通用图标，而且这些图标的复用率非常高，如果你的公司有多个 app，通过复用这个字体文件，可以快速使用图标，而无需复制各种图片资源。我们最终需要的是一个包含所有图标的字体文件，也就是 ttf 文件，使用过自定义字体的开发者应该知道 ttf（字体），我们可以直接在电脑上双击 ttf 文件来安装字体来使用。如下图所示

那么，您最终如何将这些矢量图标合并为一个字体文件呢？

将图标导出为

上面说过，有矢量图片和位图之分，所以位图通常都是以png、jpeg、gif的格式导出的，矢量图片一般有.ai、.pdf、.svg等，这里我们导出为svg格式。（生产团队的）发布了一个名为 to 的命令行工具。文件中的接口和切片。如果你愿意一一导出，你也可以导出，我尊重你这个男人~

安装完成后，在命令行上运行以下命令进行安装（将其替换为您自己的路径）。

sh /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

我们使用以下命令批量导出图标，其中 ${}/.. //Icon/icons。替换为您的 .${}/..icon/svg 添加到您的导出目标

sketchtool export slices ${SRCROOT}/../ZanIconFont/Icon/icons.sketch --output=${SRCROOT}/../ZanIconFont/Icon/svg --formats=svg

： 导出切片，这个跟里面的设置有关，我们这里把每个图标都设置成切片，所以对应的命令用 ，如果每个图标都有自己的，那就是 。

--=svg： 导出为 svg 格式。

我们可以通过在命令行中输入它们来查看相关的命令和参数，因此这里不再赘述。一些导出的 SVG 图像如下：

合成 TTF 字体文件

我们需要将上述所有 SVG 图片合并成一个 TTF，这里我们使用的是内部前端组开发的命令行工具，已经开源了，安装和详细说明可以在这里看到。

在命令行上执行

iconfount --found-config.js

其中 found-.js 是你的配置文件，支持 JS 或 JSON，在 / 中有一个示例配置文件供参考。看看我们个人资料部分的截图：

name：字体名称 （），用于在后续代码中注册字体。

：输出字体、样式和示例文件的目录，可以是相对的或绝对的

：存储 SVG 文件的根目录是上一步生成的 SVG 目录。

：所有图标的定义，每个图标都有很多其他属性，src 等等，这里我们只需要使用 src 属性就行了。最好与项目中的每个图标的名称保持一致。

其他参数在上面有详细的描述，因此我不会在这里全部列出。

生成的文件如下所示

可以看到 ttf 已经包含在 font 文件夹中，还有 woff 和 eot 等其他类型，在 Web 端用到，对于 App 可以忽略。我们看到有一个如下demo.html，其中列出了图标列表，点击右上角的 show codes 即可查看对应的代码。我们在项目中使用这个demo.html时需要依赖它的可视化界面，否则你不知道代码对应的图标是什么样子的。

以上就是生成 ttf 字体文件的全过程，还有很多优秀的平台提供了一整套的功能，比如 ，等，这些平台提供了很多成熟的图标集，支持在线导入自定义 SVG 图标，生成样式、字体文件等等一整套的解决方案， 关于这些平台的使用在这里就不赘述了，每个官方网站和很多文章都有非常详细的描述。但是，我们认为后期的维护更新还是比较麻烦的，如果需要把更新图标重新导入到平台，生成字体文件，然后导入项目，每次都需要手动完成。所以，他基于并使用了大量的代码和库开发了一个命令行工具，可以很好的集成到项目中完成自动化，然后更新图标，设计师只需要更新图标本身sketch如何安装icon，我们的库就可以通过重新构建来完成所有操作。这里 iOS 用来管理私有库，所以每次图标更新时，库的开发者都会更新整个文件，然后重新构建，会自动执行导出 svg 图标和生成字体文件的脚本，业务方可以升级版本。

在应用程序中使用，在 iOS 中使用

我们先来看看简单的演示

首先，将上面制作的 TTF 字体文件引入到项目中，在代码中注册字体，然后打印出来找到你的字体。

+ (void)registerFontWithURL:(NSURL *)url {
    NSAssert([[NSFileManager defaultManager] fileExistsAtPath:[url path]], @"Font file doesn't exist");
    CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url);
    CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider);
    CGDataProviderRelease(fontDataProvider);
    CTFontManagerRegisterGraphicsFont(newFont, nil);
    CGFontRelease(newFont);    NSLog(@"%@",[UIFont familyNames]);
}

使用场景：

作为文本

是字体文件的一般用法，代码如下。但是，这种方法在替换原始图标的过程中会改变添加控件的方式，这些图标最初使用的是图像控件，现在它们被更改为其他文本控件，因此我们建议使用第二个。

label.attributedText = [ZanIconFont attributedStringWithIcon:zicon_edit fontSize:20 color:[UIColor redColor]]

部分实施

+ (NSAttributedString *)attributedStringWithIcon:(ZanIconName)iconName fontSize:(CGFloat)fontSize color:(UIColor *)color
{    UIFont *font = [self fontWithSize:fontSize];    NSMutableDictionary *attributed = [NSMutableDictionary dictionaryWithDictionary:@{NSFontAttributeName:font}];    if (color) {
        [attributed setObject:color forKey:NSForegroundColorAttributeName];
    }    return [[NSAttributedString alloc] initWithString:iconName attributes:attributed];
}

作为 image

我们使用的方法是增加设置图片的方法，同时还可以添加其他控件，例如。这会将控件的大小读取为图像。

[self.imageView setImageWithIcon:zicon_edit];

您还可以自定义图像的大小、 、 和其他属性

UIImage *image = [ZanIconFont imageWithIcon:zicon_edit imageSize:CGSizeMake(30, 30) fontSize:20 tintColor:[UIColor redColor]];

部分实施

+ (UIImage *)imageWithIcon:(ZanIconName)iconName imageSize:(CGSize)imageSize fontSize:(CGFloat)fontSize tintColor:(UIColor *)tintColor
{    if (!iconName) {
        NSAssert(iconName, @"icon object should not be nil, check if the font file is added to the application bundle and you're using the correct font name.");        return nil;
    }
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, [UIScreen mainScreen].scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    NSMutableAttributedString *fontString = [ZanIconFont attributedStringWithIcon:iconName fontSize:fontSize color:tintColor];    CGSize iconSize = [fontString size] ;    CGFloat xOffset = (imageSize.width - iconSize.width) / 2.0;    CGFloat yOffset = (imageSize.height - iconSize.height) / 2.0;    CGRect rect = CGRectMake(xOffset, yOffset, iconSize.width, iconSize.height);
    [fontString drawInRect:rect];    UIImage *iconImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();    return iconImage;
}

也可以在图标名称上设置图标名称，并通过添加属性类型来匹配相应的名称。

@implementation UIImageView (ZanIconFont)- (void)setIconName:(NSString *)iconNameString
{
    ZanIconName iconName = [ZanIconFont iconNameWithString:iconNameString];    if (!iconName) {        return;
    }
    [self setImage:[ZanIconFont imageWithIcon:iconName imageSize:self.bounds.size tintColor:self.tintColor]];
}@end

使用中

您可以参考开源库

总结

一开始在 web 上使用比较流行，在 App 中较少，但目前看来很多大厂也都在使用 App，访问给我们的项目带来了很多便利，同时也可以解决模块化过程中不同模块之间重复图片的问题。

参考

：

如有侵权请联系删除！