Wondershake 開発者ブログ

LOCARI(ロカリ)の運営会社の開発者ブログです。

アイコンフォントライブラリを使ってみる

こんにちは、iOS開発担当の藤井です。

iOSアプリの開発を行うときにちょっと面倒なのがアイコン画像ファイルの追加だったりします。画像を切り出して、Images.xcassetsに1x, 2x, 3xをそれぞれ追加して… 特にモックレベルのものを作るときは、そもそもアイコン画像がなかったりするので自分で用意するとなると相当大変です。

先日の記事でも紹介したIoniconsiOS/Androidアプリ内で利用頻度が高そうなアイコンをカスタムフォントとして利用できるフォントライブラリです。

まずはインストール方法ですが、IonIconsはCocoapodsで配信されているのでいつものようにPodfileに以下を追加します。

pod 'ionicons'

UIImageとして利用したい場合は、

UIImage *icon = [IonIcons imageWithIcon:ion_ionic
                                  iconColor:[UIColor redColor] 
                                   iconSize:60.0f 
                                  imageSize:CGSizeMake(90.0f, 90.0f)];

という感じでUIImageとして生成します。色やサイズなども同時に指定可能です。 ただあくまでもアイコンフォントなので単色のみでしか指定できないので注意が必要です。 'ion_ionic'の部分はサイトから使いたいアイコンをホバーすると出てきます。'ion_ios_arrow_back'や'ion_ios_search'といったよく使いそうなアイコンから、'ion_social_twitter'や'ion_social_facebook'といった地味に便利なアイコンまでたくさんそろっています。

f:id:penpen-0704:20160803021212p:plain

UIImageだけでなくUILabelとしても利用できます。

UILabel *label = [IonIcons labelWithIcon:ion_ionic size:20.0f color:[UIColor blackColor]];

という形で生成してあげればOKです。

また、カスタムフォントなので文中に混ぜるといったことも可能です。例えばLocariでは記事一覧画面でのお気に入り数の横にあるハートアイコンをその方法で追加しておます。

これは

NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@ %@", ion_ios_heart_outline, likeCount]];

[attributedText addAttributes:@{NSFontAttributeName:[IonIcons fontWithSize:13]} range:NSMakeRange(1, 1)];

cell.likeLabel.attributedText = attributedText;

という感じにstringWithFormatなどで連結してあげて、NSFontAttributeNameでIonIconsを該当箇所に指定するとうまい具合に反映されます。

f:id:penpen-0704:20160803024032p:plain

文字内に含むのは若干レアケースかもしれないのですが、覚えておくと何かと便利かもしれません。

このようにLocariではIonIconsを利用しているのですが、もちろんこれ以外にもたくさんのフォントライブラリがあり、まとめて入れたい場合はFontAwesomeKit辺りを入れると便利なので気になる方はこちらも検討してみてください。

またSwiftの場合は別な方がSwift版をCocoapodsで配布しているので、そっちを利用すると良さそうです。

またWondershakeではアイコンフォントライブラリを使いこなせるiOSエンジニアも募集中です。 www.wantedly.com