Iconic 在 iOS、tvOS 和 watchOS 上实现图标字体的无缝集成。其主要组件负责使用 SwiftGen 自动生成强类型 Swift 代码,兼容 Objective-C。
您将与名为 {FontName}Icon.swift
的自动生成的类进行交互,它是 IconDrawable.swift
协议的一个轻量级抽象。更多相关信息,请查看 如何安装 以及 如何使用。
在终端中简单地运行 pod try Iconic
,开始测试 Iconic,并选择 Samples.xcworkspace
。
为什么使用图标字体?
- 无分辨率依赖:缩放和着色无质量损失
- 自动对不同屏幕密度进行缩放
- 使用更少的图像文件
- 提高视觉一致性
- 平台无关
- 增强 UI 可访问性
- 易于使用
在哪里找到出色的图标字体?
- 请查看这个仓库中可用的 图标字体!
- 有许多(大多数都可在 SIL Open Font License 下使用)开源图标字体(它们是为网络设计的,但仍然非常适用于 iOS)。
- 您可以向您附近的设计师咨询!创建图标字体并不那么困难,尤其是如果您已经拥有矢量资产。
- 您可以阅读这篇文章 如何创建和使用您自己的图标字体,并尝试 fontastic.me。
关键特性
- 通过 CocoaPods 安装简便
- 从字体的 PUA 范围以外自动生成枚举和 Unicode 映射
- 输出
NSAttributedString
和UIImage
- 支持 TTF 和 OTF 字体文件
- 字体动态包含和注册
- 界面构建器支持(仅限 iOS 和 tvOS)
- UIKit 扩展 用于
UIBarButtonItem
、UITabBarItem
和UIButton
(仅限 iOS 和 tvOS) - 自动生成图标字体 HTML 目录
- 与 Swift 3.0 和 Objective-C 兼容
- iOS 8 或更高版本
- tvOS 9 或更高版本
- watchOS 2 或更高版本
注意:一些开源的图标字体没有包含其符号名称。这可能导致枚举描述不清,使用 Iconic 时可能会使您感到不太直观。如果您创建了自己的图标字体,请确保每个符号都有适当的名称。
安装
通过 CocoaPods
首先在 Podfile 中定义 Iconic。因为我们在非传统设置中使用环境变量,所以您需要以下方式操作
pod 'Iconic', :git => 'https://github.com/home-assistant/Iconic.git', :tag => '1.3'
使用自定义图标字体安装 Iconic 需要使用 FONT_PATH
环境变量
FONT_PATH='/Users/WillFerrell/Desktop/super-duper-font.otf' pod install
FONT_PATH='/Users/WillFerrell/Desktop/super-duper-font.otf' pod update Iconic
如果您简单地调用 pod install
,Iconic 将使用其默认字体 FontAwesome 安装。
安装完成后,您应该看到 3 个文件:IconDrawable.swift
,自动生成的 {FontName}Icon.swift
以及作为资源添加的字体文件:[图片endif="Pod Setup"]
如何使用
有关完整文档,请访问 Iconic 的文档http://cocoadocs.org/docsets/Iconic/。
导入
导入 Iconic 模块
Swift
import Iconic
Objective-C
@import Iconic;
注册图标字体
激活 Iconic 需要注册,您只需在应用启动时进行一次操作。在应用生命周期内,图标映射会被检索并保存在内存中。
Iconic 提供了一种方便注册图标字体的方式:注意:方法名可能会根据您的图标字体名称而改变
Swift
FontAwesomeIcon.register()
Objective-C
[Iconic registerFontAwesomeIcon];
作为图像使用
您可以从字体图标构建一个 UIImage
实例并为其着色。这对于与预期已经存在 UIImage
对象的现有 UIKit 控件集成可能非常方便。
图像使用 NSStringDraw API 创建,它将 NSAttributedString
渲染为 UIImage
。
Swift
let size = CGSize(width: 20, height: 20)
let icon = FontAwesomeIcon.HomeIcon
let image = icon.image(ofSize: size, color: .blue)
Objective-C
[Iconic imageWithIcon:FontAwesomeIconHomeIcon size:CGSizeMake(20, 20) color:[UIColor blueColor]];
作为富文本字符串使用
您可能也需要将图标作为文本来使用,以简化布局工作。例如,您可以将图像和标签结合成一个单一的标签
Swift
let icon = FontAwesomeIcon.HomeIcon
let iconString = icon.attributedString(ofSize: 20, color: .blue)
Objective-C
[Iconic attributedStringWithIcon:FontAwesomeIconHomeIcon pointSize:20.0 color:[UIColor blueColor]];
作为 Unicode 字符串使用
最终,您可能需要获取图标的 Unicode 字符串表示以进行更复杂的功能
Swift
let unicode = FontAwesomeIcon.HomeIcon.unicode
作为字体使用
为了进一步定制,您可能需要使用 UIFont 对象
Swift
let font = FontAwesomeIcon.font(ofSize: 20)
Objective-C
UIFont *font = [Iconic fontAwesomeIconFontOfSize:20.0];
界面构建器支持
Iconic 包含了一个名为 {FontName}IconView.swift
的 UIImageView
子类,遵循 @IBInspectable
。此类允许在需要时轻松地将 IB 与其集成。
- 使用
iconName
属性在界面构建器中设置图标(使用图标字体 HTML 目录作为图标名称的参考)。 - 调整视图的边界以查看图标的动态调整。
UIKit 扩展
UIKit 扩展也已包括,仅使您的代码看起来更为简洁。
Swift
// UITarbBarItem
UITabBarItem(withIcon: .BookIcon, size: CGSize(width: 20, height: 20), title: "Catalog")
// UIBarButtonItem
UIBarButtonItem(withIcon: .BookIcon, size: CGSize(width: 24, height: 24), target: self, action: #selector(didTapButton))
// UIButton
let button = UIButton(type: .System)
button.setIconImage(icon: .HeartIcon, size: CGSize(width: 44, height: 44), color: nil, forState: .Normal)
Objective-C
// UITarbBarItem
[[UITabBarItem alloc] initWithIcon:FontAwesomeIconBookIcon size:CGSizeMake(20.0, 20.0) title:@"Catalog"];
// UIBarButtonItem
[[UIBarButtonItem alloc] initWithIcon:FontAwesomeIconCogIcon size:CGSizeMake(24.0, 24.0) target:self action:@selector(didTapButton)];
// UIButton
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
[button setIconImageWithIcon:FontAwesomeIconHeartIcon size:CGSizeMake(44.0, 44.0) color:nil forState:UIControlStateNormal];
示例项目
只需在终端中执行 pod try Iconic
,即可测试 Iconic,并选择 Samples.xcworkspace
。
在示例项目中,Iconic 被作为开发 pod 安装。因此,pod 文件没有版本号。因此,如果您手动克隆存储库,您将需要自己安装 pod。
关于 watchOS 支持
当运行 watchOS 示例时,您可能会遇到 "No such module CoreText" 的错误。这是因为 watchOS Simulator 中缺少 CoreText.framework。运行此存储库中定位的 'WatchSimulator-CoreText-Patch.sh' 脚本,从 WatchOS SDK 复制 CoreText 头文件。然后,您将能够无问题地运行 watchOS 示例,以及在模拟器中运行您的 Watch apps 的 Iconic。
图标字体目录
除了自动生成的Swift代码之外,还会在Pods/Iconic/Source/Catalog
中添加一个图标字体目录。请将其用作图标及其名称的视觉参照。
注意:如果您使用的默认浏览器是Chrome,您需要在命令行中使用open -a 'Google Chrome' --args -allow-file-access-from-files
重新启动它,才能打开并查看目录。这是因为html的javascript会加载本地json文件,而Chrome内置了禁用它的高级安全功能。您也可以使用任何其他网络浏览器如Safari或Firefox来打开目录html。
图标字体示例
此仓库还包括一些开源和免费的图标字体,以便您可以尝试与Iconic一起使用。
- FontAwesome 由 Dave Gandy 提供
- Dripicons 由 Amit Jakhu 提供
- open-iconic 由 Waybury 提供
- MaterialIcons 由 Google 提供
- Linearicons 由 Perxis 提供
致谢
Iconic最初由Ignacio Romero Zurbuchen开发。有关更多信息,请参阅AUTHORS.md。
许可证
该库遵循Apache 2.0许可证。
SwiftGen遵循MIT许可证。
Font Awesome字体遵循SIL OFL 1.1许可证。