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
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
- Create a struct to access the linear icon font
- Examples of the linear font in use
Tools used are
Swift 4.2 and
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
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
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
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.
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 😁