# gulp-svgicons2svgfont

> Create a SVG font from several SVG icons

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

## Install

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

## Health

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

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

Warnings: low downloads.

Negative: abandoned.

## Facts

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

## Links

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

## Dependencies (6)

- [glob](https://npm.io/package/glob.md) ^11.0.0
- [vinyl](https://npm.io/package/vinyl.md) ^3.0.0
- [@types/vinyl](https://npm.io/package/@types/vinyl.md) ^2.0.12
- [plugin-error](https://npm.io/package/plugin-error.md) ^2.0.1
- [bufferstreams](https://npm.io/package/bufferstreams.md) ^4.0.0
- [svgicons2svgfont](https://npm.io/package/svgicons2svgfont.md) ^14.0.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
- [@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

- 7.0.2 (latest) — 2024-08-01
- 7.0.1 — 2024-08-01
- 7.0.0 — 2024-07-30
- 6.0.0 — 2019-06-02
- 5.0.1 — 2018-06-13
- 5.0.0 — 2018-06-13
- 4.0.2 — 2017-09-22
- 4.0.1 — 2017-08-24
- 4.0.0 — 2017-07-17
- 3.0.3 — 2017-07-17
- 3.0.2 — 2017-07-15
- 3.0.1 — 2016-02-13
- 3.0.0 — 2016-02-13
- 2.4.0 — 2015-09-12
- 2.3.1 — 2015-07-25
- … 26 more at https://npm.io/package/gulp-svgicons2svgfont/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-svgicons2svgfont
> Create a SVG font from several SVG icons

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


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

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

## Usage

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

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

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

```js
import svgicons2svgfont from 'gulp-svgicons2svgfont';

gulp.task('Iconfont', function () {
  svgicons2svgfont(['assets/icons/*.svg'], {
    fontName: 'myfont',
  })
    .on('glyphs', function (glyphs) {
      console.log(glyphs);
      // Here generate CSS/SCSS  for your glyphs ...
    })
    .pipe(gulp.dest('www/font/'));
});
```

Every icon must be prefixed with it's codepoint. The `prependUnicode` option
allows to do it automatically. Then, in your own CSS, you just have to use the
corresponding codepoint to display your icon. See this
[sample less mixin](https://github.com/ChtiJS/chtijs.francejs.org/blob/master/documents/less/_icons.less)
for a real world usage.

The plugin stream emits a `codepoints` event letting you do whatever you want
with them.

Please report icons to font issues to the
[svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont) repository on
wich this plugin depends. Note this Gulp plugin is strictly equivalent to the
above module
[CLI interface](https://github.com/nfroidure/svgicons2svgfont#cli-interface).

## API

### svgicons2svgfont(options)

#### options.prependUnicode

Type: `Boolean` Default value: `false`

Allow to prepend unicode codepoints to icon file names in order to always keep
the same codepoints accross each run.

#### options.fileName

Type: `String` Default value: options.fontName

Allows to specify a fileName if needed it to be different from the fontName, eg.
do not want to have spaces.

#### options.startUnicode

Type: `integer` Default value: `0xEA01`

Starting codepoint used for the generated glyphs. Defaults to a region within
the Unicode private use area which is currently unused. See
[this blog post](http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html)
for further details and additional suggestions regarding accessibility of icon
fonts.

#### options.metadataProvider

Type: `Function` Default value:
[`require('svgicons2svgfont/src/metadata')(options)`](https://github.com/nfroidure/gulp-svgicons2svgfont/blob/master/src/index.js#L47-L50)

Allows to define your own logic to attach codepoints to input files.

#### options.\*

The
[svgfont2svgicons](https://github.com/nfroidure/svgicons2svgfont#svgicons2svgfontoptions)
options are also available:

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

### Note

You may look after a full Gulp web font workflow, see
[gulp-iconfont](https://github.com/nfroidure/gulp-iconfont) fot that matter.

## Contributing

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

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

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

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

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