svg-to-webfont v1.1.2
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 thesrc
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 fromoptions.templateOptions
.webfontsGenerator.templates.scss
– Default SCSS template path. It generates mixinwebfont-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 fromhtmlDest
todest
) - 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.