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

    @vusion/webfonts-generator

    0.7.3 • 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'); }
      

    cssContext

    Type: function
    Default: options.function(ctx, options, handlebars) {}

    Add parameters or helper to your template.

    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.

    htmlContext

    Type: function
    Default: options.function(ctx, options, handlebars) {}

    Add parameters or helper to your template.

    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

    13,828

    Version

    0.7.3

    License

    Unlicense

    Unpacked Size

    38.3 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar