fontagon
v1.1.1
Published
Easy web icon font generator
Downloads
5,819
Maintainers
Readme
Fontagon
You can easily create web-icon-font by creating svg as font.
Intro
This module easily converts svg to font files and css. It is a new and updated module that refers to webfonts-generator and provides a variety of additional functions such as css, less, sass, and stylus conversion.
Features:
- Supported font formats:
WOFF2
,WOFF
,EOT
,TTF
andSVG
. - Supports the product built with
css
,sass
,less
, andstylus
. - Custom templates are available.
- Support for
ligature
Infos
Install
Install with npm:
npm install fontagon
Usage
Create a file to build svg.
// index.js
const Fontagon = require('fontagon')
Fontagon({
files: [
'path/**/*.svg'
],
dist: 'dist/',
fontName: 'fontagon-icons',
style: 'all',
classOptions: {
baseClass: 'fontagon-icons',
classPrefix: 'ft'
}
}).then((opts) => {
console.log('done! ' ,opts)
}).catch((err) => {
console.log('fail! ', err)
})
Modify package.json's npm script or run a build file generated through the nodejs.
{
"scripts": {
"build:fontagon": "node build/index.js"
}
}
$ npm run build:fontagon
Now use the build output. You only need to insert the style sheet
.
<link rel="stylesheet" type="text/css" href="dist/fontagon-icons.css">
import '../dist/fontagon-icons.css'
Fontagon generates svg by class
and supports ligature
. just put the name of the svg.
<i class="fontagon-icons ft-icon">SVG FILE NAME</i>
<i class="fontagon-icons ft-icon ft-SVG FILE NAME"></i>
The above results are the same.
Options
files
List of SVG files.
- Type:
Array
- Default:
[]
- required
dist
Directory for generated font files.
- Type:
String
- Default:
'dist/'
fontName
Specify a font name and the default name for the font file.
- Type:
String
- Default:
'fontagon-icons'
style
stylesheet file generation type.
- Type:
String
- Default:
'all'
- options:
'css', 'sass', 'less', 'stylus'
styleTemplate
Specify a custom style template.
The '.hbs' extension is required because the custom template is compiled through handlebars.
If the style
is 'all', only one pre-processor template is specified in the styleTemplate
,
it is merged with the default option and processed.
- Type:
Object
- Default:
{
"styleTemplate": {
"css": "css.hbs",
"sass": "sass.hbs",
"less": "less.hbs",
"stylus": "styl.hbs"
}
}
classOptions
Additional options for CSS templates, that extends default options. When 'baseClass' is set, it is specified by the default class name of the stylesheet, or 'classPrefix' as a sub class factor of the stylesheet.
- Type:
Object
- Default:
{
"baseClass": "fontagon-icons",
"classPrefix": "ft"
}
order
Order of src
values in font-face
in CSS file.
- Type:
Array
- Default:
['eot', 'woff2', 'woff', 'ttf', 'svg']
rename
Function that takes path of file and return name of icon.
- Type:
Function
- Default: basename of file
startCodepoint
Starting codepoint. Defaults to beginning of unicode private area.
- Type:
Number
- Default:
0xF101
codepoints
Specific codepoints for certain icons.
Icons without codepoints will have codepoints incremented from startCodepoint
skipping duplicates.
- Type:
Object
- Default:
{}
formatOptions
Specific per format arbitrary options to pass to the generator
- Type:
object
- Default:
{
"svg": {
"normalize": true,
"fontHeight": 1000
}
}
format and matching generator:
svg
- svgicons2svgfont.ttf
- svg2ttf.woff2
- ttf2woff2.woff
- ttf2woff.eot
- ttf2eot.
writeFiles
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.
- Type:
Boolean
- Default:
true
License
MIT License Copyright (c) Dev.DY