ecw

ember-cli-webfont

Easily generate webfonts from svg files as part of your ember-cli build process

Showing:

Popularity

Downloads/wk

8

GitHub Stars

21

Maintenance

Last Commit

3yrs ago

Contributors

10

Package

Dependencies

10

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Developing addon

Installation

  • git clone this repository
  • npm install
  • bower install

Running

  • ember server
  • Visit your app at http://localhost:4200.

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial