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.
npm install --save-dev vusion-webfonts-generator
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!');
}
})
Type: object
Object with options. See the list of options.
Type: function(error, result)
required
Type: array.<string>|array.<readStream>
List of SVG files.
required
Type: string
Directory for generated font files.
Type: string
Default: 'iconfont'
Name of font and base name of font files.
Type: boolean
Default: true
Whether to generate CSS file.
Type: string
Default: path.join(options.dest, options.fontName + '.css')
Path for generated CSS file.
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'); }
Type:
string
Default:options.destCss
Fonts path used in CSS file.
Type:
boolean
Default:false
Whether to generate HTML preview.
Type:
string
Default:path.join(options.dest, options.fontName + '.html')
Path for generated HTML file.
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.
Type:
object
Additional options for CSS & HTML templates, that extends default options.
Default options are:
{ classPrefix: 'icon-', baseSelector: '.icon' }
Type:
array<string>
Default:['woff2', 'woff', 'eot']
Font file types to generate. Possible values:
svg, ttf, woff, woff2, eot
.Type:
array<string>
Default:['eot', 'woff2', 'woff', 'ttf', 'svg']
Order of
src
values infont-face
in CSS file.Type:
function(string) -> string
Default: basename of fileFunction that takes path of file and return name of icon.
Type:
number
Default:0xF101
Starting codepoint. Defaults to beginning of unicode private area.
Type:
object
Specific codepoints for certain icons. Icons without codepoints will have codepoints incremented from
startCodepoint
skipping duplicates.Type:
boolean
Default:true
Enable or disable ligature function.
Options that are passed directly to svgicons2svgfont.
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.
webfontsGenerator({ // options formatOptions: { // options to pass specifically to the ttf generator ttf: { ts: 1451512800000 } } }, function(error, result) {})
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 functiongenerateCss([urls])
whereurls
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 })
Public domain, see the
LICENCE
file.webfonts-generator's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.