Ember-cli-webfont NPM

ember-cli-webfont

This addon wraps webfonts-generator to allow you to easily generate webfonts as part of your ember build process.

Installation

ember install ember-cli-webfont

Usage

By default the addon expects to find your SVG files in app/webfont-svg and will add CSS classes to your generated CSS.

To use the icons you just need to give an element these classes e.g.

<span class="iconfont iconfont-ember"></span>

Will display the SVG from app/webfont-svg/ember.svg (with the default values for path, classPrefix and baseSelector - see below).

Configuration

You can configure the behaviour of the addon by passing a hash of options when initialising your ember app. The names of parameters and default options are shown below:

var app = new EmberApp({
  webfont: {
    path: 'app/webfont-svg/',
    options: {
      files: ['**/*.svg'],
      dest: 'assets/webfonts/',
      fontName: 'iconfont',
      cssDest: 'temp/ember-cli-webfont.css',
      cssFontsUrl: 'webfonts/',
      cssTemplate: webfont.templates.css,
      templateOptions: {
        classPrefix: 'iconfont-',
        baseSelector: '.iconfont'
      }
    }
  }
});

Documentation on these options can be found on the webfonts-generator repository.

Additionally the cssDest option can go through some extra processing. If left out, the default value is temp/ember-cli-webfont.css and the resulting file will be imported into vendor.css automatically. Otherwise it has to be imported manually. The latter is useful when using Sass, LESS, or other CSS preprocessors.