npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fontagon

v1.1.1

Published

Easy web icon font generator

Downloads

5,819

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