# fontagon > Easy web icon font generator Latest version **1.1.1** (published 2021-06-28) · MIT license · 0 weekly downloads ## Install ```sh npm install fontagon pnpm add fontagon yarn add fontagon bun add fontagon ``` ## Health **Score 23/100 (F)** — status: abandoned. Positive: has types package; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.1 | | Published | 2021-06-28 | | First published | 2020-04-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/fontagon) | | Module format | CommonJS | | Dependencies | 14 | | Unpacked size | 26.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 23 | | Maintainers | kdydesign | | Keywords | font, webfont, svg, ttf, woff, woff2, icon-font, icon | ## Links - npm: https://www.npmjs.com/package/fontagon - Repository: https://github.com/kdydesign/fontagon - Issues: https://github.com/kdydesign/fontagon/issues - npm.io page: https://npm.io/package/fontagon ## Dependencies (14) - [q](https://npm.io/package/q.md) ^1.5.1 - [glob](https://npm.io/package/glob.md) ^7.1.6 - [chalk](https://npm.io/package/chalk.md) ^4.1.1 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [mkdirp](https://npm.io/package/mkdirp.md) ^1.0.4 - [rimraf](https://npm.io/package/rimraf.md) ^3.0.2 - [consola](https://npm.io/package/consola.md) ^2.11.3 - [svg2ttf](https://npm.io/package/svg2ttf.md) ^4.3.0 - [ttf2eot](https://npm.io/package/ttf2eot.md) ^2.0.0 - [ttf2woff](https://npm.io/package/ttf2woff.md) ^2.0.1 - [url-join](https://npm.io/package/url-join.md) ^4.0.1 - [ttf2woff2](https://npm.io/package/ttf2woff2.md) ^3.0.0 - [handlebars](https://npm.io/package/handlebars.md) ^4.7.6 - [svgicons2svgfont](https://npm.io/package/svgicons2svgfont.md) ^9.1.1 ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads ## Recent versions - 1.1.1 (latest) — 2021-06-28 - 1.0.10 — 2020-06-15 - 1.0.9 — 2020-05-12 - 1.0.8 — 2020-04-29 - 1.0.7 — 2020-04-26 - 1.0.6 — 2020-04-22 - 1.0.5 — 2020-04-22 - 1.0.3 — 2020-04-22 - 1.0.2 — 2020-04-22 ## README ![Fontagon logo](https://raw.githubusercontent.com/kdydesign/cdn/master/fontagon/logo/svg/fontagon-logo-inline.svg) # 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 ``` ```javascript import '../dist/fontagon-icons.css' ``` **Fontagon** generates svg by `class` and supports `ligature`. just put the name of the svg. ```html SVG FILE NAME ``` 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](https://handlebarsjs.com/).
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" } } ```
### `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: ```json { "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: ```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).
### `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](./LICENSE) Copyright (c) [Dev.DY](https://kdydesign.github.io/) [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 --- _Source: https://npm.io/package/fontagon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._