# font-awesome-icon-generator

> Create small .png icons from a font-awesome 4.7 icon

Latest version **0.0.2-beta1** (published 2023-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install font-awesome-icon-generator
pnpm add font-awesome-icon-generator
yarn add font-awesome-icon-generator
bun add font-awesome-icon-generator
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2-beta1 |
| Published | 2023-11-24 |
| First published | 2023-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Peter V. Mørch |
| Maintainers | pmorch |
| Keywords | font, awesome, fontawesome, icon |

## Links

- npm: https://www.npmjs.com/package/font-awesome-icon-generator
- Homepage: https://github.com/pmorch/font-awesome-icon-generator
- npm.io page: https://npm.io/package/font-awesome-icon-generator

## Dependencies (3)

- [sharp](https://npm.io/package/sharp.md) ^0.32.6
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [@ladjs/svgfont2js](https://npm.io/package/@ladjs/svgfont2js.md) ^1.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
- [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.0.2-beta1 (latest) — 2023-11-24
- 0.0.1-beta1 — 2023-11-24

## README

# `font-awesome-icon-generator`: Generating icons from font-awesome

Use case: You want to create an icon for your app and are lazy. Pick a
font-awesome icon and a color and be done with it.

## Pick an icon

Visit https://fontawesome.com/v4/icons/ and pick an icon. It has to be from v4,
as that is the last version with an open license, so it can be distributed in
npm. (Patches welcome to support later versions.)

Let us say you picked `fa-binoculars` from
https://fontawesome.com/v4/icon/binoculars . Congratulations!

Notice how that page also shows the Unicode hex value: `f1e5`:

![fa-binoculars screenshot](https://i.imgur.com/rw9LiHM.png)

## Pick a color

Google has a color picker: https://www.google.com/search?q=color+picker

Lets say you picked `#962456` as the color, because magenta binoculars are cool.
Congratulations!

## Install it

```shell
$ npm install font-awesome-icon-maker
```

## Create the configuration and go

```javascript
import fontAwesomeIconGenerator from 'font-awesome-icon-generator'

const config = {
  iconOutputFile: (size) => `bino-icon-${size}.png`,
  unicodeHex: 'f1e5',
  color: '#962456',
  // // These defaults can be omitted
  // sizes: [16, 32, 48, 64, 128, 256, 512],
  // mirrorX: false,
  // mirrorY: false,
}

fontAwesomeIconGenerator(config)
```

This will create these files:

```
bino-icon-16.png
bino-icon-32.png
bino-icon-48.png
bino-icon-64.png
bino-icon-128.png
bino-icon-256.png
bino-icon-512.png
```

That's it.

## Optional extra - create favicon(s)

Now, what I do is to create a favicon from `bino-icon-512.png` using
https://www.npmjs.com/package/favicons as documented on
https://github.com/itgalaxy/favicons. 

This is not part of this project, but is mentioned here as a natural next step.

I usually only need the single `favicon.ico` and generate it like this:

```javascript
import favicons from "favicons";
import fs from "fs/promises";

const src = "./bino-icon-512.png";
const faviconFileName = "favicon.ico"

const response = await favicons(src, { path: "/never-used-but-needs-a-value"});
const faviconImage = response.images.filter(i => i.name == faviconFileName)[0]
await fs.writeFile(faviconFileName, faviconImage.contents)
```

But read the favicons documentation for many more options, now that you have the
icons.

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