# webfonts-generator [![Build Status](https://travis-ci.org/sunflowerdeath/webfonts-generator.svg?branch=master)](https://travis-ci.org/sunflowerdeath/webfonts-generator) Generator of webfonts from SVG icons. Features: * Supported font formats: WOFF2, WOFF, EOT, TTF and SVG. * Supported browsers: IE8+. * Generates CSS files and HTML preview, allows to use custom templates. ## Install ``` npm install --save-dev webfonts-generator ``` ## Usage ```js const webfontsGenerator = require('webfonts-generator'); webfontsGenerator({ files: [ 'src/dropdown.svg', 'src/close.svg', ], dest: 'dest/', }, function(error) { if (error) { console.log('Fail!', error); } else { console.log('Done!'); } }) ``` ## webfontsGenerator(options, done) ### options Type: `object` Object with options. See the list of options. ### done Type: `function(error, result)` ## List of options ### files *required* Type: `array.` List of SVG files. ### dest *required* Type: `string` Directory for generated font files. ### fontName Type: `string`
Default: `'iconfont'` Name of font and base name of font files. ### css Type: `boolean`
Default: `true` Whether to generate CSS file. ### cssDest Type: `string`
Default: `path.join(options.dest, options.fontName + '.css')` Path for generated CSS file. ### cssTemplate Type: `string`
Default: path of default CSS template Path of custom CSS template. Generator uses handlebars templates. Template receives options from `options.templateOptions` along with the following options: * fontName * src `string` – Value of the `src` property for `@font-face`. * codepoints `object` – Codepoints of icons in hex format. Paths of default templates are stored in the `webfontsGenerator.templates` object. * `webfontsGenerator.templates.css` – Default CSS template path.
It generates classes with names based on values from `options.templateOptions`. * `webfontsGenerator.templates.scss` – Default SCSS template path.
It generates mixin `webfont-icon` to add icon styles.
It is safe to use multiple generated files with mixins together.
Example of use: ``` @import 'iconfont'; .icon { @include webfont-icon('icon'); } ``` ### cssFontsPath Type: `string`
Default: `options.destCss` Fonts path used in CSS file. ### html Type: `boolean`
Default: `false` Whether to generate HTML preview. ### htmlDest Type: `string`
Default: `path.join(options.dest, options.fontName + '.html')` Path for generated HTML file. ### htmlTemplate Type: `string`
Default: `templates/html.hbs` HTML template path. Generator uses handlebars templates. Template receives options from `options.templateOptions` along with the following options: * fontName * styles `string` – Styles generated with default CSS template. (`cssFontsPath` is chaged to relative path from `htmlDest` to `dest`) * names `array.` – Names of icons. ### templateOptions Type: `object` Additional options for CSS & HTML templates, that extends default options. Default options are: ```js { classPrefix: 'icon-', baseSelector: '.icon' } ``` ### types Type: `array`
Default: `['woff2', 'woff', 'eot']` Font file types to generate. Possible values: `svg, ttf, woff, woff2, eot`. ### order Type: `array`
Default: `['eot', 'woff2', 'woff', 'ttf', 'svg']` Order of `src` values in `font-face` in CSS file. ### rename Type: `function(string) -> string`
Default: basename of file Function that takes path of file and return name of icon. ### startCodepoint Type: `number`
Default: `0xF101` Starting codepoint. Defaults to beginning of unicode private area. ### codepoints Type: `object` Specific codepoints for certain icons. Icons without codepoints will have codepoints incremented from `startCodepoint` skipping duplicates. ### fontName, fixedWidth, centerHorizontally, normalize, fontHeight, round, descent Options that are passed directly to [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont). ### formatOptions Type: `object` Specific per format arbitrary options to pass to the generator format and matching generator: - `svg` - [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont). - `ttf` - [svg2ttf](https://github.com/fontello/svg2ttf). - `woff2` - [ttf2woff2](https://github.com/nfroidure/ttf2woff2). - `woff` - [ttf2woff](https://github.com/fontello/ttf2woff). - `eot` - [ttf2eot](https://github.com/fontello/ttf2eot). ```js webfontsGenerator({ // options formatOptions: { // options to pass specifically to the ttf generator ttf: { ts: 1451512800000 } } }, function(error, result) {}) ``` ### writeFiles Type: `boolean`
Default: `true` It is possible to not create files and get generated fonts in object to write them to files later.
Also results object will have function `generateCss([urls])` where `urls` is an object with future fonts urls. ```js webfontsGenerator({ // options writeFiles: false }, function(error, result) { // result.eot, result.ttf, etc - generated fonts // result.generateCss(urls) - function to generate css }) ``` ## License Public domain, see the `LICENCE` file.

	Stars	Issues	Version	Updated	Created
fontgen-loader	125	22	0.2.1	8 years ago	9 years ago
iconfont-webpack-plugin	111	22	5.0.1	3 years ago	8 years ago
webfonts-generator	271	39	0.4.0	7 years ago	9 years ago
webfonts-loader	190	9	8.0.1	a year ago	7 years ago

fontgen-loader vs iconfont-webpack-plugin vs webfonts-generator vs webfonts-loader

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past