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

gulp-iconfont

v12.0.0

Published

Create icon fonts from several SVG icons

Downloads

98,393

Readme

gulp-iconfont

Create icon fonts from several SVG icons

GitHub license

You can test this library with the frontend generator.

Warning: While this plugin may still be useful for fonts generation or old browser support, you should consider using SVG icons directly. Indeed, when I created gulp-iconfont and all its related modules, using SVG icons was just not realistic for a wide browser support but I was already convinced that SVG was the future, that's why I wanted my SVG source files to sit separated in a folder. So, now, just enjoy switching to SVG with almost no effort :). Was a great open source journey with you all!

More info on why using SVG over icon fonts.

Usage

First, install gulp-iconfont as a development dependency:

npm install --save-dev gulp-iconfont

Then, add it to your gulpfile.js:

import iconfont from 'gulp-iconfont';

const runTimestamp = Math.round(Date.now() / 1000);

gulp.task('Iconfont', function () {
  return iconfont('assets/icons/*.svg', {
    fontName: 'myfont', // required
    prependUnicode: true, // recommended option
    formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
    timestamp: runTimestamp, // recommended to get consistent builds when watching files
  })
    .on('glyphs', function (glyphs, options) {
      // CSS templating, e.g.
      console.log(glyphs, options);
    })
    .pipe(gulp.dest('www/fonts/'));
});

gulp-iconfont bundles several plugins to bring a simpler API (gulp-svgicons2svgfont, gulp-svg2tff, gulp-ttf2eot, gulp-ttf2woff) for more flexibility, feel free to use them separately.

If some font glyphs aren't converted properly you should add the normalize:true option and a fontHeight greater than 1000 (fontHeight: 1001).

Make your CSS

You can also generate your CSS automatically with gulp-iconfont-css.

Issues

Add issues to the right repos:

  • the plugin doesn't work at all, submit your issue in this repo,
  • every font doesn't display as expected: submit the issue to the svgicons2svgfont repository,
  • only some fonts are damaged? Please look at the font format the targeted browser actually use and then, submit your issue to one of those projects: svg2ttf, ttf2eot, ttf2woff.

API

iconfont(dir, options)

dir

Path to the icons files.

options.formats

Type: Array Default value: ['ttf', 'eot', 'woff'] Possible values: ['svg', 'ttf', 'eot', 'woff', 'woff2']

Since SVG fonts are deprecated in some (every ?) browsers, they are disabled per default.

Also the WOFF2 fonts are disabled since it seems to cause issues on some setup (see https://github.com/nfroidure/gulp-iconfont/issues/64).

options.autohint

Type: Boolean|String Default value: false

If ttfautohint is installed on your system, you may want to auto hint your fonts. Beware that this is an experimental and untested feature (beware to use at least the 0.93 version).

If the value is a string, it is taken to be the path to the ttfautohint binary. Otherwise, ttfautohint is searched in $PATH.

options.*

The svgicons2svgfont are available:

  • options.fontName (required)
  • options.fontWeight
  • options.fontStyle
  • options.fixedWidth
  • options.centerHorizontally
  • options.normalize
  • options.fontHeight
  • options.round
  • options.descent
  • options.metadata
  • options.log

So are the gulp-svgicons2svgfont:

  • options.startUnicode
  • options.prependUnicode

And the gulp-svg2ttf:

  • options.timestamp

Preparing SVG's

Beware that your SVG icons must have a high enough height. 500 is a minimum. If you do not want to resize them, you can try to combine the fontHeight and the normalize option to get them in a correct size.

Inkscape

Ungroup every shapes (Ctrl+Shift+G), convert to pathes (Ctrl+Maj+C) and merge them (Ctrl++). Then save your SVG, prefer 'simple SVG' file type.

Illustrator

Save your file as SVG with the following settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: SVG
  • Fonts Subsetting: None
  • Options Image Location: Embed
  • Advanced Options
    • CSS Properties: Presentation Attributes
    • Decimal Places: 1
    • Encoding: UTF-8
    • Output fewer elements: check

Leave the rest unchecked.

More in-depth information: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Contributing

Feel free to push your code if you agree with publishing under the MIT license.

You may want to use the dockerized version of TTFAutoHint, to do so, run:

docker build -t ttfautohint .

Authors

License

MIT