amirkian007 / amirkian007.github.io

svg-to-webfont

Generator a full pack 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 svg-to-webfont

or

yarn add --save-dev svg-to-webfont

Usage

runing from cli

setp 1 : adding script to package.json

Add the svg-to-webfont script to the pacakge.json file like the example below, make sure to create a config file and add the necessary files and set the relative path of the config file in the script with the -c arg.

 "scripts": {
    "svg-to-webfont": "svg-to-webfont -c ./config.json"
  },

example of the json config file:

// config.json
{
    "dest": "dist",
    "icons": "icons",
    "fontName": "ircolor-icons",
    "css": true,
    "cssDest": "dist/css/ircolor-icons.css",
    "cssFontsUrl": "../fonts/",
    "types": [
        "woff",
        "woff2",
        "ttf",
        "eot"
    ],
    "templateOptions": {
        "classPrefix": "ir-",
        "baseSelector": ".ir"
    }
}

running the script form cli like this will run the package:

npm run svg-to-webfont

NOTE : if the pack is created successfully a success message is diplayed !

runing from api

const { generateIconPackage } = require('svg-to-webfont')

const config = {
    dest: "dist",
    icons: "icons",
    fontName: "ircolor-icons",
    css: true,
    cssDest: "dist/css/ircolor-icons.css",
    cssFontsUrl: "../fonts/",
    types: [
        "woff",
        "woff2",
        "ttf",
        "eot"
    ],
    templateOptions: {
        "classPrefix": "i-",
        "baseSelector": ".i"
    }
}

generateIconPackage(config)

List of options

icons

required

Type: string

path to the folder where svg icons sit.

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:

• svg - svgicons2svgfont.
• ttf - svg2ttf.
• woff2 - ttf2woff2.
• woff - ttf2woff.
• eot - ttf2eot.

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.

License

Public domain, see the LICENCE file.