# fontgen-loader

> A WebPack loader to automaticaly generate font files and CSS to make your own icon font

Latest version **0.2.1** (published 2016-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install fontgen-loader
pnpm add fontgen-loader
yarn add fontgen-loader
bun add fontgen-loader
```

## 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.2.1 |
| Published | 2016-03-26 |
| First published | 2015-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 125 |
| Author | Ingwie Phoenix |
| Maintainers | ingwiephoenix |
| Keywords | font, webfont, iconfont, web, icon, generator, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/fontgen-loader
- Repository: https://github.com/dragonsinn/fontgen-loader
- Homepage: https://github.com/dragonsinn/fontgen-loader#readme
- Issues: https://github.com/dragonsinn/fontgen-loader/issues
- npm.io page: https://npm.io/package/fontgen-loader

## Dependencies (3)

- [glob](https://npm.io/package/glob.md) ^6.0.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^0.2.10
- [webfonts-generator](https://npm.io/package/webfonts-generator.md) ^0.3.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
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2016-03-26
- 0.2.0 — 2016-03-11
- 0.1.10 — 2016-01-11
- 0.1.9 — 2015-12-28
- 0.1.8 — 2015-12-26
- 0.1.7 — 2015-12-03
- 0.1.6 — 2015-12-02
- 0.1.5 — 2015-10-24
- 0.1.3 — 2015-07-15
- 0.1.2 — 2015-06-29
- 0.1.1 — 2015-06-25
- 0.1.0 — 2015-06-25

## README

# `fontgen-loader` - Bam, easy webfonts!

Have you faced this? You have 4 icons from FontAwesome, and 19 from Glyphicons, and maybe you are eying at another webfont's icons and wishing to use them?

What a mess! Okay okay, so what do we do? We make our own. And how? ...good question. In fact, this question comes up just so often... So I decided to write a little thing to help out.

## How `fontgen-loader` works.
There is a tool that lets us generate fonts automaticaly by a configuration. The font is created by putting several SVG icons together and generating the proper file(s). That includes:

- A font file for WOF, EOT, TTF and WOFF2. Also SVG, if you want. But there is a trend of removal within browsers - you can see more on [caniuse](http://caniuse.com).
- A CSS has your font configured. That means, it's a proper `@font-face` declaration inclusive icon classes.
- If you want, a HTML demo page.

In order to use this loader, you need to be aware that this is a "trigger loader". That means, it can not just be added to your `webpack.config.js` like any other loader, you need to be aware of what it does in the long run.

## configuration

```javascript
module.exports = {
    resolve: {
        loaders: [
            {
                test: /\.font\.(js|json)$/,
                loader: "style!css!fontgen"
            }
        ]
    }
}
```

This loader returns CSS. Therefore, you have to pipe it through the proper loaders. You should be able to use this with the `extract-text-plugin` as well.

However, there are more configurations. you could also specify a custom template to use, to return different kinds of source. A LESS or SCSS version, for instance? Up to you.

## Usage

Now that we have the loader configured, it's about time we give this a go. First, you want to load your font like so, within your entry code:

```javascript
// main.js
require("./Awesomecons.font"); // .js or .json does not matter if you used the config above.
```

Now, the loader will load in the font from the given configuration, and the CSS is added to your webpack project, properly rendered and prepared. Now, this is what a configuration should look like. The following is an example, and I am using JSON here, since I know that my code is more static, but you may have a varying requirement, which is why JS will be allowed. Make sure the configuration ends up being the contents of `module.exports`.

Example:

module style
```javascript
module.exports = {
    "files": [
            "icon/my.svg",
            "icon/awesome.svg",
            "icon/stuff.svg",
            "icon/special/*.svg" // glob style
        ],
    "fontName": "Awesomecons",
    "classPrefix": "ai-",
    "baseClass": "ai",
    "fixedWidth": true,
    "types": ["eot", "woff", "ttf", "svg"] // this is the default
}
```

or .json (content should be an object)
```json
{
    "files": []
}
```



Now, the loader will pick up this config, pull it through the generator and:

- Generate CSS with the base and class prefix.
- Font files for the three SVG icons.

And there you are - your webfont is done. Now, here is one thing: You can use JavaScript too. A useful thing is, that there are two additional options that I did not mention:

In addition, you also have these options:

- `.rename`: This should be a function that returns the icon's name based on the input (filename).
- `.log`: You can log stuff here.
- `.formatOptions`: An object containing options to their specific transformers. See [this PR](https://github.com/sunflowerdeath/webfonts-generator/pull/6) and [this README entry](https://github.com/sunflowerdeath/webfonts-generator#formatoptions) to learn more.

You also can use a module like `glob` to pick up a variable set of icons, too. Mix and match and mind the various licenses - and make your own webfont!


# Configuration
## Loader parameters

- `template`, String
Which template to use? By default, a CSS one is used. The template is to be processed by Handlebars. See [the generator](https://github.com/sunflowerdeath/webfonts-generator)'s readme itself for more info.

- `embed`, Boolean
Should the fonts be embedded in the CSS? By default the fonts are written to disk. If `embed` is specified the font is base64 encoded and embedded inside the `@font-face` declaration. Example configuration: `loader: "style!css!fontgen?embed&types=woff"`.

## Font configuration (`*.font.js` or `*.font.json`)

- `files`, Array
An array of SVG icon files. Supports glob

- `fontName`, String
Name of your font.

- `classPrefix`, String
The prefix to be used with each icon class.

- `baseClass`, String
The base class, under which each icon class is to be crated.

- `types`, Array
Possible values are: `["svg", "eot", "wof", "ttf"]`.

For additional options, see the generator's README file.

### Special configuration
There is one special configuration optin that exists in both, the actual font configuration and as a query parameter: `fileName`. This one decides the output of the font filenames. You can create a filename template with these elements (will likely become more in the future):

- `[fontname]`: The name of the font. I.e. "Awesomefont".
- `[ext]`: The extension. I.e.: `.woff`.
- `[hash]`: The hash of your current compilation.

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