# gulp-iconfont

> Create icon fonts from several SVG icons

Latest version **12.0.0** (published 2024-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-iconfont
pnpm add gulp-iconfont
yarn add gulp-iconfont
bun add gulp-iconfont
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 12.0.0 |
| Published | 2024-08-01 |
| First published | 2014-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.11.1 |
| Dependencies | 9 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 849 |
| Author | Nicolas Froidure |
| Maintainers | sabberworm, nfroidure, pioug, narida |
| Keywords | gulpplugin, gulp, icon, font |

## Links

- npm: https://www.npmjs.com/package/gulp-iconfont
- Repository: https://github.com/nfroidure/gulp-iconfont
- Issues: https://github.com/nfroidure/gulp-iconfont/issues
- npm.io page: https://npm.io/package/gulp-iconfont

## Dependencies (9)

- [multipipe](https://npm.io/package/multipipe.md) ^4.0.0
- [gulp-spawn](https://npm.io/package/gulp-spawn.md) ^1.0.0
- [@types/vinyl](https://npm.io/package/@types/vinyl.md) ^2.0.12
- [gulp-svg2ttf](https://npm.io/package/gulp-svg2ttf.md) ^3.0.0
- [gulp-ttf2eot](https://npm.io/package/gulp-ttf2eot.md) ^2.0.0
- [streamfilter](https://npm.io/package/streamfilter.md) ^4.0.0
- [gulp-ttf2woff](https://npm.io/package/gulp-ttf2woff.md) ^2.0.0
- [gulp-ttf2woff2](https://npm.io/package/gulp-ttf2woff2.md) ^5.0.0
- [gulp-svgicons2svgfont](https://npm.io/package/gulp-svgicons2svgfont.md) ^7.0.2

## 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
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 12.0.0 (latest) — 2024-08-01
- 11.0.1 — 2021-12-14
- 11.0.0 — 2021-01-16
- 10.0.3 — 2019-06-04
- 10.0.2 — 2018-10-10
- 10.0.1 — 2018-06-13
- 10.0.0 — 2018-06-13
- 9.2.0 — 2018-06-06
- 9.1.0 — 2018-01-17
- 9.0.2 — 2017-09-22
- 9.0.1 — 2017-09-01
- 9.0.0 — 2017-07-15
- 8.0.1 — 2016-06-23
- 8.0.0 — 2016-05-10
- 6.0.0 — 2016-02-13
- … 32 more at https://npm.io/package/gulp-iconfont/versions

## README

[//]: # ( )
[//]: # (This file is automatically generated by a `metapak`)
[//]: # (module. Do not change it  except between the)
[//]: # (`content:start/end` flags, your changes would)
[//]: # (be overridden.)
[//]: # ( )
# gulp-iconfont
> Create icon fonts from several SVG icons

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/nfroidure/gulp-iconfont/blob/main/LICENSE)


[//]: # (::contents:start)

You can test this library with the
[frontend generator](http://nfroidure.github.io/svgiconfont/).

**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](https://sarasoueidan.com/blog/icon-fonts-to-svg/).

## Usage

First, install `gulp-iconfont` as a development dependency:

```shell
npm install --save-dev gulp-iconfont
```

Then, add it to your `gulpfile.js`:

```javascript
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`](https://github.com/backflip/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](https://github.com/nfroidure/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](https://github.com/fontello/svg2ttf),
  [ttf2eot](https://github.com/fontello/ttf2eot),
  [ttf2woff](https://github.com/fontello/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](http://www.freetype.org/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](https://github.com/nfroidure/svgicons2svgfont#svgicons2svgfontoptions)
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](https://github.com/nfroidure/gulp-svgicons2svgfont#svgicons2svgfontoptions):

- options.startUnicode
- options.prependUnicode

And the
[gulp-svg2ttf](https://github.com/nfroidure/gulp-svg2ttf#svg2ttfoptions):

- 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 <tspan> elements: check

Leave the rest unchecked.

More in-depth information:
[http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html](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:

```sh
docker build -t ttfautohint .
```

[//]: # (::contents:end)

# Authors
- [Nicolas Froidure](http://insertafter.com/en/index.html)

# License
[MIT](https://github.com/nfroidure/gulp-iconfont/blob/main/LICENSE)

---
_Source: https://npm.io/package/gulp-iconfont · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._