Iconic-JX 1.5-jx3

Iconic-JX 1.5-jx3

tospery 维护。



Iconic-JX 1.5-jx3

  • Ignacio Romero Zurbuchen, Robbie Trencheny 以及 Home Assistant 作者团队

Iconic Header

Travis codecov Pod Version Pod Platforms Swift Version License

Iconic 在 iOS、tvOS 和 watchOS 上实现图标字体的无缝集成。其主要组件负责使用 SwiftGen 自动生成强类型 Swift 代码,兼容 Objective-C。

您将与名为 {FontName}Icon.swift 的自动生成的类进行交互,它是 IconDrawable.swift 协议的一个轻量级抽象。更多相关信息,请查看 如何安装 以及 如何使用

在终端中简单地运行 pod try Iconic,开始测试 Iconic,并选择 Samples.xcworkspace

Scale Example

为什么使用图标字体?

  • 无分辨率依赖:缩放和着色无质量损失
  • 自动对不同屏幕密度进行缩放
  • 使用更少的图像文件
  • 提高视觉一致性
  • 平台无关
  • 增强 UI 可访问性
  • 易于使用

在哪里找到出色的图标字体?

关键特性

注意:一些开源的图标字体没有包含其符号名称。这可能导致枚举描述不清,使用 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 installIconic 将使用其默认字体 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];

界面构建器支持

Interface Builder

Iconic 包含了一个名为 {FontName}IconView.swiftUIImageView 子类,遵循 @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中添加一个图标字体目录。请将其用作图标及其名称的视觉参照。

Icon Font Catalog

注意:如果您使用的默认浏览器是Chrome,您需要在命令行中使用open -a 'Google Chrome' --args -allow-file-access-from-files重新启动它,才能打开并查看目录。这是因为html的javascript会加载本地json文件,而Chrome内置了禁用它的高级安全功能。您也可以使用任何其他网络浏览器如Safari或Firefox来打开目录html。

图标字体示例

此仓库还包括一些开源和免费的图标字体,以便您可以尝试与Iconic一起使用。

致谢

Iconic最初由Ignacio Romero Zurbuchen开发。有关更多信息,请参阅AUTHORS.md

许可证

该库遵循Apache 2.0许可证。

SwiftGen遵循MIT许可证

Font Awesome字体遵循SIL OFL 1.1许可证