Vector Rendering Made Simple

Talk about a new (beta) OSS framework called Iconic, to easily render vector icons on UIKit using icon fonts.
https://github.com/dzenbot/Iconic

Given at the iOS Love meetup in Santiago, Chile
http://www.meetup.com/iOSLove/events/233640045/

Transcript

1. Ignacio Romero Z. | iOS @ ! | " github.com/dzenbot Let’s make UIKit great again! Vector Rendering Made Simple
2. Agenda 1. The image assets XP is broken 2. Native vector rendering 3. The Iconic framework
3. How everything started #
4. The Asset Catalog
5. The Asset Catalog Xcode’s “single vector” scale factor
6. Broken image assets XP Per device types Per screen densities Per custom scaling Per custom tint color The fragmentation matrix:
7. Alternatives Xcode’s “single vector” scale factor PaintCode Scalable Vector Graphics (SVG) Icon Fonts
8. Icon Fonts to the rescue!
9. Icon Fonts Resolution free: scale and tint without quality loss Automatically scaled for different screen densities. Work with (way) less image files. Improve visual consistency. Platform agnostic. Add better UI accessibility. Simple to work with. What the font?
10. How do icon fonts work? Icon Fonts
11. How does a glyph look like? Icon Fonts
12. Icons appended to text Dynamically composed Simplified layout The Slack icon font Icon Fonts
13. ! Show me the code!
14. // Encapsulates the unicode values as Raw Value @objc enum SLKIconType: Int { case Channel case Group var unicode: String { switch self { case Channel: return "\u{E125}" case Group: return "\u{E503}" } } }
15. class SLKIconEngine: NSObject { class func iconStringForType(icon: SLKIconType) -> String { if let string = NSString(UTF8String: icon.unicode) { return string as String } return "" } }
16. func iconLabelText() -> NSAttributedString { let font = UIFont.slackIconFontOfSize(16) let color = UIColor.lightGrayColor() let att = [NSFontAttributeName : font, NSForegroundColorAttributeName : color] let str: String = SLKIconEngine.iconStringForType(.UpArrow) return NSAttributedString(string: str, attributes: att) }
17. var unicode: String { switch self { case Channel: return "\u{E125}" case ChannelUnread: return "\u{E150}" case ChannelMute: return "\u{E016}" case Group: return "\u{E503}" case Online: return "\u{E506}" case Offline: return "\u{E507}" case OnlineDND: return "\u{E508}" case OfflineDND: return "\u{E535}" case RAOnline: return "\u{E509}" case RAOffline: return "\u{E510}" case RAOnlineDND: return "\u{E511}" case RAOfflineDND: return "\u{E536}" case RADND: return "\u{E511}" case URAOnline: return "\u{E512}" case URAOffline: return "\u{E513}" case URAOnlineDND: return "\u{E514}" case URAOfflineDND: return "\u{E537}" case Slackbot: return "\u{E515}" case TeamSwitch: return "\u{E071}"
18. //TODO: plz rewrite me!
19. Objectives Easy to install Easy to use Compatible with Objective-C Powered by NSAttributedString & NSStringDrawing APIs Minimal maintenance
20. Easy to install m automation? Easy to use m automation? Compatible with Objective-C Powered by NSAttributedString & NSStringDrawing APIs Minimal maintenance m automation? Objectives
21. automation
22. " github.com/AliSoftware/SwiftGen SwiftGen! A collection of Swift tools to generate Swift code
23. beta " github.com/dzenbot/Iconic Iconic Render vector icons, natively.
24. Core Features Fonts are registered dynamically, effortless UIKit extensions Auto-generated html catalog iOS and tvOS support Easy to install with CocoaPods Swift and Objective-C TTF and OTF font files Auto-generates enums and unicodes mapping, out of the font's PUA range Attributed String and Image outputs
25. Render vector icons, natively!
26. Installation $ pod install Iconic
27. Installation $ FONT_PATH='MyFont.otf' pod install Iconic
29. Behind the scenes $ pod install Iconizer $ swift json % & SwiftGen ' % prepare_command ( pod source directory pod install 4 real ) MyFontIcon.swift MyFont.otf catalog.html * 
30. HTML Catalog
31. ! Show me the code!
32. Iconic.registerFontAwesomeIcon() Registration
33. Iconic.imageForFontAwesomeIcon(.Star, size: 20, color: .whiteColor()) Icon as image
34. Iconic.attributedStringForFontAwesomeIcon(.Star, size: 20, color: .whiteColor()) Icon as string
35. func iconLabelText() -> NSAttributedString? { return Iconic.attributedString(forIcon: ._283, size: 16, color: .lightGrayColor()) } Sample implementation
36. ! Demo!
37. Recap 1. Xcode’s Asset Catalog 2. Icon fonts 3. Iconic
38. beta " github.com/dzenbot/Iconic Iconic Render vector icons, natively.
39. Thank You! Questions?