Latest 1.0.0
Homepage https://github.com/mokagio/Stencils
License MIT
Platforms ios , requires ARC
Frameworks CoreText
Authors

Build Status
Stories in Ready
Pod Version
Pod Version

Speedup your iOS app development using icon fonts!

Icon fonts are very popular in the web development world. And they are awesome. With Stencils you can now access the power and awesomeness of icon fonts in the development of your iOS app, and save a lot of emails with the designer to get the new asset with the shadow 0.5 point more to the left and 3.141592% less opaque.

Install

Via CocoaPods.

pod 'Stencils'

or

pod 'Stencils', ~> 'x.x.x'

where x.x.x is the version number you want. Latest stable is Pod Version

Usage

Three simple steps:

1. Add your icon font file to the project

Just add the .ttf to the project. No Info.plist update needed! And you can even add multiple icon fonts.

2. Define your icons

Stencils needs to know how to read the font file. Create a configuration file, by default Stencils will look for Stencils.plist, in this fashion:

font-icons  Array
    Item 0  Dictionary
        font-name               String  The name of the font where the icon is located
        icon-name               String  The name to use to load the icon
        icon-code               String  The unicode caracter corresponding to the icon
                                        i.e: e001
        baseline-adjustement    Number  (Optional) A correction value to compensate eventual offset from the baseline
        scale-adjustement       Number  (Optional) A correction value to change the scale of the icon. Usually used with "baseline-adjustement"

Have a look at the example projects to see how a real configurations plist looks like.

3. Load icons using STIconsFactory and STIconView

#import <STIconsFactory.h>

STIconsFactory *factory = [[STIconsFactory alloc] init];
STIconView *arrow = [factory iconViewForIconNamed:@"arrow-left" withSide:60.0f];

You can customize your icon like this:

arrow.backgroundColor = [UIColor whiteColor];
arrow.color = [UIColor blackColor];
// If no color is set the icon will use the tintColor of its superview
arrow.shadowColor = [UIColor grayColor];
arrow.shadowOffset = CGSizeMake(1.0f, 1.0f);

Tuning the icons metrics

It can happen that the icons are rendered cropped. This is due to the original font metrics not being as iOS would like them. baseline-adjustement and scale-adjustement are there to compensate this issue.

To help you fine tune those values there’s the IconSettings app from this repo. You can load your raw .plist, launch it on a device, tune each icon, then email yourself the tuned .plist. It’s a rather sub-optimal approach, but… it works.

.plist generator script

Use the experimental plist_generator.rb script located in the Scripts folder to generate the Stencils.plist to import together with the .ttf font in your app from the .css that you would use for the webfont.

Run plist_generator.rb --help

Important note: the script is experimental, that is I cannot guarantee it’s gonna work 100% of the times. I tried it only on the css files that IcoMoon and Fontello generate.

Where to find icons fonts

Contribute

  1. Fork the repo
  2. Checkout a new branch username/feature_name
  3. Open a Pull Request

===

Made with ♥ by @mokagio. Special thanks to @tancdev.

Latest podspec

{
    "name": "Stencils",
    "version": "1.0.0",
    "summary": "Speedup your iOS app development using icon fonts.",
    "homepage": "https://github.com/mokagio/Stencils",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Giovanni Lodi": "[email protected]"
    },
    "source": {
        "git": "https://github.com/mokagio/Stencils.git",
        "tag": "1.0.0"
    },
    "source_files": "Stencils",
    "platforms": {
        "ios": null
    },
    "requires_arc": true,
    "frameworks": "CoreText"
}

Pin It on Pinterest

Share This