iOSでFont Awesomeを使う

# はじめに

これは 2018/2/23 の
[ROPPONGI.swift 第1回 - connpass](https://visits.connpass.com/event/78975/)
発表資料です。

---

![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/ccd75bca-b16c-6b14-2c69-4214e87a737a.png)

---

これ？　`UIBarButtonSystemItem` ですね🤓
https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem

---

## 🙅

---

### `UIBarButtonSystemItem` で使えるアイコンはこれだけ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/58d66b1c-0a6d-13db-a4ef-966cc9ca6cde.png)

https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem より

---

小規模でデザイナーが
確保できないプロジェクトだったり

今すぐイイ感じのアイコンを求める
スピード感を優先したいプロジェクトだったり

そんなあなたの強い味方

---

## Font Awesome

---

https://fontawesome.com/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/4d69684f-7200-4fa7-ac09-70ffeb2549e7.png)

---

### Font Awesome 5 (2018/2 現在)

- Version 5.0.6
- 2316 のアイコン
    - Free で使えるアイコンは 929個

---

### Style

- Solid (塗りつぶし)
- Regular (白抜き)
- Light (線が細い・Proのみ)
- Brands (各種ロゴ)

---

こういう感じ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/88164d4d-60a6-bf4f-3787-ff324ec2aa56.png)

---

![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/1d4c41c8-dc60-a227-170c-cac77479c275.png)

- 基本は Solid
- 白抜きの Regular が提供されている場合も
- Brands は必要ならお好みで

---

# 導入方法

---

1) ダウンロード

![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/63477b61-87cf-8c15-4839-7c3ecf8bce93.png)

---

2) プロジェクトにバンドル
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/6b482bf3-8ef5-06f4-d95d-17b9dc2dd897.png)

※ 3ファイル揃ってないといけないわけではない
Solidだけ入れるとかでも可

---

3) Copy Bundle Resources への追加も忘れない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/a17ce823-4fcc-1377-d5a3-95d8a18a30e3.png)

---

4) Info.plist に `Fonts provided by application` 追記
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/df9d1362-dda3-85f8-f240-959d954f82ea.png)

```diff
  <dict>
+ 	<key>UIAppFonts</key>
+ 	<array>
+ 		<string>Font Awesome 5 Free-Solid-900.otf</string>
+ 		<string>Font Awesome 5 Free-Regular-400.otf</string>
+ 		<string>Font Awesome 5 Brands-Regular-400.otf</string>
+ 	</array>
```

---

```swift
print(UIFont.familyNames)
```

```swift
["Copperplate", "Heiti SC", "Apple SD Gothic Neo",
 "Thonburi", "Gill Sans", ... "Trebuchet MS",
 "Font Awesome 5 Free", ...] 👈🎉
```

---

```swift
print(UIFont.fontNames(
    forFamilyName: "Font Awesome 5 Free"
))
print(UIFont.fontNames(
    forFamilyName: "Font Awesome 5 Brands"
))
```

```swift
["FontAwesome5FreeSolid", "FontAwesome5FreeRegular"]
["FontAwesome5BrandsRegular"]
```

---

# 使ってみる

---

```swift
label.font = UIFont(name: "FontAwesome5BrandsRegular",
                    size: 100)
label.text = "github"
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/e1229edf-3f6b-bd36-897d-1023bcdbbf60.png)

---

https://fontawesome.com/icons?d=gallery

![image.png](https://qiita-image-store.s3.amazonaws.com/0/34405/5a5fe724-e255-08aa-dcf2-bc7a9ba6b22a.png)

---

## 薄いラッパーを用意する

---

```swift
public struct FontAwesome {
    public enum Style {
        case solid, regular // brands はお好みで

        public var fontName: String {
            switch self {
            case .solid: return "FontAwesome5FreeSolid"
            case .regular: return "FontAwesome5FreeRegular"
            }
        }
    }
    public static func font(size: CGFloat, style: Style = .solid) -> UIFont {
        return UIFont(name: style.fontName, size: size)!
    }

    public struct Icon {
        let code: String

        public static let cog = Icon(code: "cog")
        public static let star = Icon(code: "star")
    }
}
```

---

```swift
extension NSAttributedString {
    public static func icon(
        _ icon: FontAwesome.Icon,
        size: CGFloat,
        style: FontAwesome.Style = .solid)
        -> NSAttributedString {
        return NSAttributedString(
            string: icon.code,
            attributes: [
                .font : FontAwesome.font(size: size, style: style)
            ]
        )
    }
}
```

---

```swift
extension UIBarButtonItem {
    public convenience init(
        icon: FontAwesome.Icon,
        closure: @escaping (UIBarButtonItem) -> Void
        ) {
        self.init(title: icon.code,
                  style: .done,
                  closure: closure) // ※

        let states: [UIControlState] = [
            .normal, .highlighted, .disabled, .focused
        ]
        states.forEach {
            self.setTitleTextAttributes([
                .font : FontAwesome.font(size: 26)
                ], for: $0)
        }
    }
}
```

※ UIBarButtonItem のハンドラをクロージャで書くために、[ActionClosurable](https://github.com/takasek/ActionClosurable) を利用しています。


---



```swift
navigationItem.rightBarButtonItem
 = UIBarButtonItem(icon: .cog) { _ in
    print("tapped!")
}
```

![inline](https://qiita-image-store.s3.amazonaws.com/0/34405/ccd75bca-b16c-6b14-2c69-4214e87a737a.png)

---

もうちょっと大層な Font Awesome ラッパーのライブラリがGitHubに転がってたりもするけど、そこまでやるのはオーバーだと思う(IMO)

---

そんな感じで
楽しくアイコン活用しつつ
アプリを作っていきましょう