# iconfont-maker

> This is a iconfont maker

Latest version **0.0.7** (published 2017-10-12) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2017-10-12 |
| First published | 2017-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kat5ura |
| Maintainers | katsura |
| Keywords | iconfont, svg, font, maker |

## Links

- npm: https://www.npmjs.com/package/iconfont-maker
- Repository: https://github.com/Kat5ura/iconfont-maker
- Homepage: https://github.com/Kat5ura/iconfont-maker#readme
- Issues: https://github.com/Kat5ura/iconfont-maker/issues
- npm.io page: https://npm.io/package/iconfont-maker

## Dependencies (4)

- [q](https://npm.io/package/q.md) ^1.5.0
- [svgo](https://npm.io/package/svgo.md) ^0.7.2
- [node-glob](https://npm.io/package/node-glob.md) ^1.2.0
- [webfonts-generator](https://npm.io/package/webfonts-generator.md) ^0.4.0

## 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

- 0.0.7 (latest) — 2017-10-12
- 0.0.6 — 2017-10-12
- 0.0.5 — 2017-10-12
- 0.0.4 — 2017-10-12
- 0.0.3 — 2017-10-10
- 0.0.2 — 2017-09-29
- 0.0.1 — 2017-09-28

## README

# iconfont-maker


Generator of webfonts from SVG icons.

Features:

* Supported font formats: WOFF2, WOFF, EOT, TTF and SVG.
* Supported browsers: IE8+.
* Generates CSS files and HTML preview, allows to use custom templates.

## Install

```
npm install --save-dev iconfont-maker
```

## Usage

```js
const iconfontMaker = require('iconfont-maker');

iconfontMaker({
  files: [
    'src/dropdown.svg',
    'src/*.svg',
  ],
  dest: 'dest/',
}, function(error) {
  if (error) {
    console.log('Fail!', error);
  } else {
    console.log('Done!');
  }
})
```

## iconfontMaker(options, done)

### options

Type: `object`

Object with options. See the list of options.

### done

Type: `function(error, result)`

## List of options

### files

*required*

Type: `array.<string>/string/glob`

List of SVG files.

### dest

*required*

Type: `string`

Directory for generated font files.

### fontName

Type: `string`
<br>
Default: `'iconfont'`

Name of font and base name of font files.

### css

Type: `boolean`
<br>
Default: `true`

Whether to generate CSS file.

### cssDest

Type: `string`
<br>
Default: `path.join(options.dest, options.fontName + '.css')`

Path for generated CSS file.

### cssTemplate

Type: `string`
<br>
Default: path of default CSS template

Path of custom CSS template.
Generator uses handlebars templates.

Template receives options from `options.templateOptions` along with the following options:

* fontName
* src `string` &ndash; Value of the `src` property for `@font-face`.
* codepoints `object` &ndash; Codepoints of icons in hex format.

Paths of default templates are stored in the `iconfontMaker.templates` object.

* `iconfontMaker.templates.css` &ndash; Default CSS template path.
	<br>
	It generates classes with names based on values from `options.templateOptions`.

* `iconfontMaker.templates.scss` &ndash; Default SCSS template path.
	<br>
	It generates mixin `webfont-icon` to add icon styles.
	<br>
	It is safe to use multiple generated files with mixins together.
	<br>
	Example of use:

	```
	@import 'iconfont';
	.icon { @include webfont-icon('icon'); }
	```

### cssFontsPath

Type: `string`
<br>
Default: `options.destCss`

Fonts path used in CSS file.

### html

Type: `boolean`
<br>
Default: `false`

Whether to generate HTML preview.

### htmlDest

Type: `string`
<br>
Default: `path.join(options.dest, options.fontName + '.html')`

Path for generated HTML file.

### htmlTemplate

Type: `string`
<br>
Default: `templates/html.hbs`

HTML template path.
Generator uses handlebars templates.

Template receives options from `options.templateOptions` along with the following options:

* fontName
* styles `string` &ndash; Styles generated with default CSS template.
	(`cssFontsPath` is chaged to relative path from `htmlDest` to `dest`)
* names `array.<string>` &ndash; Names of icons.

### templateOptions

Type: `object`

Additional options for CSS & HTML templates, that extends default options.

Default options are:
```js
{
	classPrefix: 'icon-',
	baseSelector: '.icon'
}
```

### types

Type: `array<string>`
<br>
Default: `['woff2', 'woff', 'eot']`

Font file types to generate.
Possible values: `svg, ttf, woff, woff2, eot`.

### order

Type: `array<string>`
<br>
Default: `['eot', 'woff2', 'woff', 'ttf', 'svg']`

Order of `src` values in `font-face` in CSS file.

### rename

Type: `function(string) -> string`
<br>
Default: basename of file

Function that takes path of file and return name of icon.

### startCodepoint

Type: `number`
<br>
Default: `0xF101`

Starting codepoint. Defaults to beginning of unicode private area.

### codepoints

Type: `object`

Specific codepoints for certain icons.
Icons without codepoints will have codepoints incremented from `startCodepoint` skipping duplicates.

### fontName, fixedWidth, centerHorizontally, normalize, fontHeight, round, descent

Options that are passed directly to
[svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont).

### formatOptions

Type: `object`

Specific per format arbitrary options to pass to the generator

format and matching generator:
- `svg` - [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont).
- `ttf` - [svg2ttf](https://github.com/fontello/svg2ttf).
- `woff2` - [ttf2woff2](https://github.com/nfroidure/ttf2woff2).
- `woff` - [ttf2woff](https://github.com/fontello/ttf2woff).
- `eot` - [ttf2eot](https://github.com/fontello/ttf2eot).

```js
iconfontMaker({
  // options
  formatOptions: {
  	// options to pass specifically to the ttf generator
  	ttf: {
  		ts: 1451512800000
  	}
  }
}, function(error, result) {})
```

### writeFiles

Type: `boolean`
<br>
Default: `true`

It is possible to not create files and get generated fonts in object
 to write them to files later.
<br>
Also results object will have function `generateCss([urls])`
where `urls` is an object with future fonts urls.

```js
iconfontMaker({
  // options
  writeFiles: false
}, function(error, result) {
  // result.eot, result.ttf, etc - generated fonts
  // result.generateCss(urls) - function to generate css
})
```

### svgo

Options for [svgo](https://github.com/svg/svgo)

## Related

- [iconfont-maker-cli](https://github.com/Kat5ura/iconfont-maker-cli): CLI tool based on this maker
- [iconfont-maker-desktop](https://github.com/Kat5ura/iconfont-maker-desktop): Desktop version tool

## Thanks

- [webfonts-generator](https://github.com/sunflowerdeath/webfonts-generator). Thanks [@sunflowerdeath](https://github.com/sunflowerdeath)

## License

MIT

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