# webfonts-generator > Generator of webfonts from svg icons Latest version **0.4.0** (published 2017-02-07) · Unlicense license · 0 weekly downloads ## Install ```sh npm install webfonts-generator pnpm add webfonts-generator yarn add webfonts-generator bun add webfonts-generator ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.4.0 | | Published | 2017-02-07 | | First published | 2014-12-15 | | Weekly downloads | 0 | | License | Unlicense | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 10 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 273 | | Author | sunflowerdeath | | Maintainers | sunflowerdeath | | Keywords | font, webfont, svg, ttf, woff, woff2 | ## Links - npm: https://www.npmjs.com/package/webfonts-generator - Repository: https://github.com/sunflowerdeath/webfonts-generator - Homepage: https://github.com/sunflowerdeath/webfonts-generator#readme - Issues: https://github.com/sunflowerdeath/webfonts-generator/issues - npm.io page: https://npm.io/package/webfonts-generator ## Dependencies (10) - [q](https://npm.io/package/q.md) ^1.1.2 - [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.0 - [svg2ttf](https://npm.io/package/svg2ttf.md) ^4.0.0 - [ttf2eot](https://npm.io/package/ttf2eot.md) ^2.0.0 - [ttf2woff](https://npm.io/package/ttf2woff.md) ^2.0.1 - [url-join](https://npm.io/package/url-join.md) ^1.1.0 - [ttf2woff2](https://npm.io/package/ttf2woff2.md) ^2.0.3 - [handlebars](https://npm.io/package/handlebars.md) ^4.0.5 - [underscore](https://npm.io/package/underscore.md) ^1.7.0 - [svgicons2svgfont](https://npm.io/package/svgicons2svgfont.md) ^5.0.0 ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 0.4.0 (latest) — 2017-02-07 - 0.3.5 — 2016-04-21 - 0.3.3 — 2016-03-26 - 0.3.2 — 2016-03-24 - 0.3.1 — 2015-06-23 - 0.3.0 — 2015-06-09 - 0.2.4 — 2015-02-03 - 0.2.3 — 2015-01-29 - 0.2.2 — 2015-01-15 - 0.2.1 — 2015-01-15 - 0.2.0 — 2015-01-15 - 0.1.3 — 2015-01-11 - 0.1.2 — 2014-12-27 - 0.1.1 — 2014-12-27 - 0.1.0 — 2014-12-17 - … 1 more at https://npm.io/package/webfonts-generator/versions ## README # 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. --- _Source: https://npm.io/package/webfonts-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._