# gulp-svgicons2svgfont
> Create an SVG font from several SVG icons with [Gulp](http://gulpjs.com/).

[![NPM version](https://badge.fury.io/js/gulp-svgicons2svgfont.svg)](https://npmjs.org/package/gulp-svgicons2svgfont) [![Build status](https://secure.travis-ci.org/nfroidure/gulp-svgicons2svgfont.svg)](https://travis-ci.org/nfroidure/gulp-svgicons2svgfont) [![Dependency Status](https://david-dm.org/nfroidure/gulp-svgicons2svgfont.svg)](https://david-dm.org/nfroidure/gulp-svgicons2svgfont) [![devDependency Status](https://david-dm.org/nfroidure/gulp-svgicons2svgfont/dev-status.svg)](https://david-dm.org/nfroidure/gulp-svgicons2svgfont#info=devDependencies) [![Coverage Status](https://coveralls.io/repos/nfroidure/gulp-svgicons2svgfont/badge.svg?branch=master)](https://coveralls.io/r/nfroidure/gulp-svgicons2svgfont?branch=master) [![Code Climate](https://codeclimate.com/github/nfroidure/gulp-svgicons2svgfont.svg)](https://codeclimate.com/github/nfroidure/gulp-svgicons2svgfont)

You can test this library with the
 [frontend generator](http://nfroidure.github.io/svgiconfont/).

## Usage

First, install `gulp-svgicons2svgfont` as a development dependency:

```shell
npm install --save-dev gulp-svgicons2svgfont
```

Then, add it to your `gulpfile.js`:

```javascript
var svgicons2svgfont = require('gulp-svgicons2svgfont');

gulp.task('Iconfont', function(){
  gulp.src(['assets/icons/*.svg'])
    .pipe(svgicons2svgfont({
      fontName: 'myfont'
     }))
    .on('glyphs', function(glyphs) {
      console.log(glyphs);
      // Here generate CSS/SCSS  for your glyphs ...
    })
    .pipe(gulp.dest('www/font/'));
});
```

Every icon must be prefixed with it's codepoint. The `appendCodepoints` option
 allows to do it automatically. Then, in your own CSS, you just have to use
 the corresponding codepoint to display your icon. See this
 [sample less mixin](https://github.com/ChtiJS/chtijs.francejs.org/blob/master/documents/less/_icons.less)
 for a real world usage.

The plugin stream emits a `codepoints` event letting you do whatever you want
 with them.

Please report icons to font issues to the
 [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont) repository
 on wich this plugin depends. Note this Gulp plugin is strictly equivalent to
 the above module [CLI interface](https://github.com/nfroidure/svgicons2svgfont#cli-interface).

## API

### svgicons2svgfont(options)

#### options.ignoreExt
Type: `Boolean`
Default value: `false`

Set to true to also convert read icons that doesn't have the .svg extension.

#### options.prependUnicode
Type: `Boolean`
Default value: `false`

Allow to prepend unicode codepoints to icon file names in order to always keep
 the same codepoints accross each run.

#### options.fileName
Type: `String`
Default value: options.fontName

Allows to specify a fileName if needed it to be different from the fontName, eg. do not want to have spaces.

#### options.startUnicode
Type: `integer`
Default value: `0xEA01`

Starting codepoint used for the generated glyphs. Defaults to a region within the Unicode private use area which is currently unused. See [this blog post](http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html) for further details and additional suggestions regarding accessibility of icon fonts.

#### options.metadataProvider
Type: `Function`
Default value: [`require('svgicons2svgfont/src/metadata')(options)`](https://github.com/nfroidure/gulp-svgicons2svgfont/blob/master/src/index.js#L47-L50)

Allows to define your own logic to attach codepoints to input files.

#### options.*
The [svgfont2svgicons](https://github.com/nfroidure/svgicons2svgfont#svgicons2svgfontoptions)
 options are also available:
* options.fontName (required)
* options.fileName
* options.fontWeight
* options.fontStyle
* options.fixedWidth
* options.centerHorizontally
* options.normalize
* options.fontHeight
* options.round
* options.descent
* options.metadata
* options.log

### Note

You may look after a full Gulp web font workflow, see
 [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont)
  fot that matter.

## Stats

[![NPM](https://nodei.co/npm/gulp-svgicons2svgfont.png?downloads=true&stars=true)](https://nodei.co/npm/gulp-svgicons2svgfont/)
[![NPM](https://nodei.co/npm-dl/gulp-svgicons2svgfont.png)](https://nodei.co/npm/gulp-svgicons2svgfont/)

## Contributing
Feel free to push your code if you agree with publishing under the MIT license.