fontagon

Easy web icon font generator

Usage no npm install needed!

<script type="module">
  import fontagon from 'https://cdn.skypack.dev/fontagon';
</script>

README

Fontagon logo

Fontagon

npm version npm downloads Circle CI Codecov Standard JS License

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 and SVG.
  • Supports the product built with css, sass, less, and stylus.
  • 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:


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