webfonts-generator-casaper

    0.5.2 • 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 webfonts-generator
    

    Usage

    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.<string>

    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.

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

    DownloadsWeekly Downloads

    5

    Version

    0.5.2

    License

    Unlicense

    Unpacked Size

    35.4 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar