Naming Prosecution Mitigator
Wondering what’s next for npm?Check out our public roadmap! »

@vusion/webfonts-generator

0.7.0 • Public • Published

webfonts-generator

Build Status

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 vusion-webfonts-generator

Usage

const webfontsGenerator = require('vusion-webfonts-generator');
const file = fs.createReadStream('src/close.svg');
file.metadata = {
	name: 'close',
}
webfontsGenerator({
  files: [
    'src/dropdown.svg',
    file,
  ],
  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.<string>|array.<readStream>

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.<string> – Names of icons.

templateOptions

Type: object

Additional options for CSS & HTML templates, that extends default options.

Default options are:

{
	classPrefix: 'icon-',
	baseSelector: '.icon'
}

types

Type: array<string>
Default: ['woff2', 'woff', 'eot']

Font file types to generate. Possible values: svg, ttf, woff, woff2, eot.

order

Type: array<string>
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.

ligature

Type: boolean
Default: true

Enable or disable ligature function.

fontName, normalize, fontHeight, round, descent

Options that are passed directly to svgicons2svgfont.

formatOptions

Type: object

Specific per format arbitrary options to pass to the generator

format and matching generator:

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.

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.

Install

npm i @vusion/webfonts-generator

DownloadsWeekly Downloads

12,934

Version

0.7.0

License

Unlicense

Unpacked Size

35.5 kB

Total Files

22

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar