forked from enviPath/enviPy
113 lines
4.3 KiB
Markdown
113 lines
4.3 KiB
Markdown
# gulp-svgicons2svgfont
|
|
> Create an SVG font from several SVG icons with [Gulp](http://gulpjs.com/).
|
|
|
|
[](https://npmjs.org/package/gulp-svgicons2svgfont) [](https://travis-ci.org/nfroidure/gulp-svgicons2svgfont) [](https://david-dm.org/nfroidure/gulp-svgicons2svgfont) [](https://david-dm.org/nfroidure/gulp-svgicons2svgfont#info=devDependencies) [](https://coveralls.io/r/nfroidure/gulp-svgicons2svgfont?branch=master) [](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
|
|
|
|
[](https://nodei.co/npm/gulp-svgicons2svgfont/)
|
|
[](https://nodei.co/npm/gulp-svgicons2svgfont/)
|
|
|
|
## Contributing
|
|
Feel free to push your code if you agree with publishing under the MIT license.
|