fontagon
Version:
Easy web icon font generator
252 lines (191 loc) • 6.21 kB
Markdown
# Fontagon
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Circle CI][circle-ci-src]][circle-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![Standard JS][standard-js-src]][standard-js-href]
![License][license-src]
> 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](https://www.npmjs.com/package/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` and `SVG`.
* Supports the product built with `css`, `sass`, `less`, and `stylus`.
* Custom templates are available.
* Support for `ligature`
## Infos
- [📖 **Release Notes**](./CHANGELOG.md)
## Install
Install with npm:
```bash
npm install fontagon
```
## Usage
Create a file to build svg.
```javascript
// 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.
```json
{
"scripts": {
"build:fontagon": "node build/index.js"
}
}
```
```sh
$ npm run build:fontagon
```
Now use the build output. You only need to insert the `style sheet`.
```html
<link rel="stylesheet" type="text/css" href="dist/fontagon-icons.css">
```
```javascript
import '../dist/fontagon-icons.css'
```
**Fontagon** generates svg by `class` and supports `ligature`. just put the name of the svg.
```html
<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*
<br>
### `dist`
Directory for generated font files.
* Type: `String`
* Default: `'dist/'`
<br>
### `fontName`
Specify a font name and the default name for the font file.
* Type: `String`
* Default: `'fontagon-icons'`
<br>
### `style`
stylesheet file generation type.
* Type: `String`
* Default: `'all'`
* options: `'css', 'sass', 'less', 'stylus'`
<br>
### `styleTemplate`
Specify a custom style template.
<br>
The **'.hbs'** extension is required because the custom template is compiled through [handlebars](https://handlebarsjs.com/).
<br>
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:
```json
{
"styleTemplate": {
"css": "css.hbs",
"sass": "sass.hbs",
"less": "less.hbs",
"stylus": "styl.hbs"
}
}
```
<br>
### `classOptions`
Additional options for CSS templates, that extends default options.
<br>
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:
```json
{
"baseClass": "fontagon-icons",
"classPrefix": "ft"
}
```
<br>
### `order`
Order of `src` values in `font-face` in CSS file.
* Type: `Array`
* Default: `['eot', 'woff2', 'woff', 'ttf', 'svg']`
<br>
### `rename`
Function that takes path of file and return name of icon.
* Type: `Function`
* Default: basename of file
<br>
### `startCodepoint`
Starting codepoint. Defaults to beginning of unicode private area.
* Type: `Number`
* Default: `0xF101`
<br>
### `codepoints`
Specific codepoints for certain icons.
<br>
Icons without codepoints will have codepoints incremented from `startCodepoint` skipping duplicates.
* Type: `Object`
* Default: `{}`
<br>
### `formatOptions`
Specific per format arbitrary options to pass to the generator
* Type: `object`
* Default:
```json
{
"svg": {
"normalize": true,
"fontHeight": 1000
}
}
```
format and matching generator:
- `svg` - [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont).
- `ttf` - [svg2ttf](https://github.com/fontello/svg2ttf).
- `woff2` - [ttf2woff2](https://github.com/nfroidure/ttf2woff2).
- `woff` - [ttf2woff](https://github.com/fontello/ttf2woff).
- `eot` - [ttf2eot](https://github.com/fontello/ttf2eot).
<br>
### `writeFiles`
It is possible to not create files and get generated fonts in object to write them to files later.
<br>
Also results object will have function `generateCss([urls])` where `urls` is an object with future fonts urls.
* Type: `Boolean`
* Default: `true`
## License
[MIT License](./LICENSE)
Copyright (c) [Dev.DY](https://kdydesign.github.io/)
<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/fontagon?style=flat-square
[npm-version-href]: https://npmjs.com/package/fontagon
[npm-downloads-src]: https://img.shields.io/npm/dt/fontagon?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/fontagon
[circle-ci-src]: https://img.shields.io/circleci/project/github/kdydesign/fontagon/master.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/kdydesign/fontagon/tree/master
[codecov-src]: https://img.shields.io/codecov/c/github/kdydesign/fontagon.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/kdydesign/fontagon
[david-dm-src]: https://david-dm.org/kdydesign/fontagon/status.svg?style=flat-square
[david-dm-href]: https://david-dm.org/kdydesign/fontagon
[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
[standard-js-href]: https://standardjs.com
[license-src]: https://img.shields.io/npm/l/fontagon?style=flat-square