The experience of managing PNG’s in Xcode for your iOS App is not great. Linear Icons can fix the pain!
Here are some of the pain points.
- You most likely have to explain to a designer why Xcode and iOS don’t like SVG’s.
- You have to deal with collecting and testing the @1X, @2X, and @3X versions of everything.
- No auto complete in code for the items in your
.xcassets
files.
Enter linear icons.
They already look beautiful! Let us learn how to use them in an iOS App. We will do this in 4 steps and then I have some bonus code for you at the end.
- Download and add font file
- Add extension to
UIFont
- Create a struct to access the linear icon font
- Examples of the linear font in use
Tools used are Swift 4.2
and xCode 10
Download and add font file
First, you need to download an icon font set. I’m going to use the free version of the IcoMoon general purpose set.
Go into the Font
folder of that download and open the Reference.html
file in your browser. Notice all the nice Icons and the unicode characters right below them. You will need these for reference very soon.
Next, you want the IcoMoon-Free.ttf
file.
Drag that file into your xCode project. Where you put it is up to you but make sure you ‘Copy items if needed’ and add to your app’s target.
It should have happened automatically but also make sure the IcoMoon-Free.ttf
made it to your app’s targets Build Phases -> Compile Sources.
Add extension to UIFont
If you have ever worked with custom fonts in iOS you probably recall having to add them to your Info.plist
file. Here, we will load them dynamically instead. The benefit is that if you want to ship font’s as some sort of dependency (cocoapods). You are instantly set up. You will need to extend UIFont
though.
Linear Icon struct
To make the font accessible in code you need to create a struct that can return you a UIFont
of a particular size and that can reference the unicode characters of the icons you want to use.
Here is what the struct should look like for now.
Two things to note. First, note that the Icons we will be using very soon are just unicode characters. If you are wondering where I got these head back to the Reference.html
file you opened up in your browser earlier. You can knock your self out adding everything right now if you feel like it. Just adding the arrows is good enough for this tutorial.
Second, notice that the func iconFont(_ size: CGSize) -> UIFont
function registers the font if it could not be constructed. Feel free to modify this and break out the registration somewhere else if you are not comfortable with the recursive call. A font only needs to be registered using our extension once per app install, not per app launch.
Example
Ok, you will have your small dopamine hit very shortly! You need to get yourself a UILabel
or some UIElement that you can assign text to. I don’t care how you do it. I made a simple UIViewController
that does not rely on a story board and has one label to play around with.
Notice I used the UILabel
just like I would if I added text. I also constrained it flush to the edges of the screen. If you did something similar to me you should see your Icon Font on screen
Congrats! The world of Linear Icons is your oyster. You can change the sizes, change the colors, move them around, what ever. You have scalable iconography now and you have to worry about @1X, @2X, and @3X a lot less. Maybe you can even impress a designer 🙃
As a bonus for your hard work here is a function that will create a UIImage
out of an Icon Font. I put this in the IconFont
struct I made earlier.
Happy coding! And please clap if you learned something 😁