npm package: @mapmelabs/icomoon-builder
Description: Update your icons library project from the zip generated by icomoon
Author: Ignacio Velazquez
Latest version: 2.0.0

# icomoon-builder

[![Build Status](https://api.travis-ci.org/nass600/icomoon-builder.svg?branch=master)](https://travis-ci.org/nass600/icomoon-builder)
[![npm](https://img.shields.io/npm/v/icomoon-builder.svg)](https://www.npmjs.com/package/icomoon-builder)
[![npm](https://img.shields.io/npm/dt/icomoon-builder.svg)](https://www.npmjs.com/package/icomoon-builder)


Update your icons library project from the zip generated by [icomoon](https://icomoon.io/).

**Fork from the original [icomoon-builder](https://github.com/nass600/icomoon-builder) project with a more flexible CLI API.**

> Currently working only for CSS and SASS.

If you are developing your own icons library using the Icomoon tool and you find yourself doing the below process all the time this project might be useful for you.

#### Normal process

1. Download the zip file from icomoon.
2. Uncompressing it.
3. Copy pasting parts of code into your own.
4. Moving files to the location you want.
5. Minify the css file.

#### Process with icomoon-builder

1. Download the font from icomoon.
2. Run `icomoon-builder`.

## Features

+ Uncompress the icomoon generated zip file for you.
+ Pick the location where the fonts styles will be moved.
+ Choose where to move the pre-processed and css styles separately.
+ All references between all these files will be updated accordingly.
+ Minify the distribution css with `cssnano`.
+ Update the font family name with the one you chose.
+ Will keep your `selection.json` generated by icomoon so you can resume your work.
+ And many more (below examples).

## Installation

```bash
npm install --save-dev icomoon-builder
```

## Usage

You can run it directly in your terminal with npx (included in npm since version 5.2):

```bash
npx icomoon-builder export <fontName> <icomoonZipFile>
```

Or add it as a script in your `package.json`:

```json
"scripts": {
    "import": "icomoon-builder export"
}
```

And then run it:

```bash
npm run import <fontName> <icomoonZipFile>
```

### Options

You can control which files are copied with some additional flags:

+ **--css &lt;path&gt;** : copies the CSS file to this path.
+ **--css-name &lt;name&gt;** : rename CSS file to the value of this flag.
+ **--docs &lt;path&gt;** : copies the docs to this path.
+ **--fonts &lt;path&gt;** : copies the font files to this path.
+ **--fonts-public &lt;path&gt;** : changes fonts path in the CSS file to this path.
+ **--force** : execute without confirmation.
+ **--json &lt;path&gt;** : copy the JSON file to this path.
+ **--no-minify** : skip CSS minification.
+ **--preprocessor &lt;path&gt;** : copy the SCSS file to this path.

Any flag that's not used in will result in such file *not* to be copied. (*Note: this differs from the previous version which required all parameters to be passed in.*)

## Examples

### Export

Considering the following files are the ones icomoon generates and compresses:

```
.tmp/
├── demo-files
|   ├── demo.css
|   └── demo.js
├── demo.html
├── fonts
|   ├── icomoon.svg
|   ├── icomoon.ttf
|   └── icomoon.woff
├── Read Me.txt
├── selection.json
├── style.css
├── style.scss
└── variables.scss
```

When running:

```bash
cd your/path/to/fancy-icons-project/
npx icomoon-builder export fancy-icons ~/Downloads/icomoon.zip --preprocessor=scss --css=css --fonts=fonts --docs=docs --json=./
```

We will obtain:

```
target/
├── css
|   ├── fancy-icons.css
|   └── fancy-icons.min.css
├── docs
|   ├── index.html
|   ├── scripts.js
|   └── styles.css
├── fonts
|   ├── fancy-icons.svg
|   ├── fancy-icons.ttf
|   └── fancy-icons.woff
└── scss
|   ├── fancy-icons.scss
|   ├── _icons.scss
|   └── _variables.scss
└── icomoon.json
```

The `export` command does not destroy directories so if you have more files in the destination folders they will remain the same.

The following is the list of files copied:

| From                       | To                                          | Operations performed                                               |
| -------------------------- | ------------------------------------------- | ------------------------------------------------------------------ |
| .tmp/demo.html             | fancy-icons-project/docs/index.html    | Updated references to assets                                       |
| .tmp/demo-files/demo.css   | fancy-icons-project/docs/styles.css    |                                                                    |
| .tmp/demo-files/demo.js    | fancy-icons-project/docs/scripts.js    |                                                                    |
| .tmp/selection.json        | fancy-icons-project/icomoon.json       | Renamed to icomoon.json                                            |
| .tmp/style.css             | fancy-icons-project/css/fancy-icons.css     | Renamed to `<fontName>`, updated references                        |
|                            | fancy-icons-project/css/fancy-icons.min.css | Minify the previous css                                            |
| .tmp/fonts/line-icons.woff | fancy-icons-project/fonts/fancy-icons.woff  | Renamed to `<fontName>`                                            |
| .tmp/fonts/line-icons.svg  | fancy-icons-project/fonts/fancy-icons.svg   | Renamed to `<fontName>`                                            |
| .tmp/fonts/line-icons.ttf  | fancy-icons-project/fonts/fancy-icons.ttf   | Renamed to `<fontName>`                                            |
| .tmp/style.scss            | fancy-icons-project/scss/_icons.scss        | Updated references and renamed `$icomoon-font-path`                |
| .tmp/variables.scss        | fancy-icons-project/scss/_variables.scss    |                                                                    |
|                            | fancy-icons-project/scss/fancy-icons.scss   | Imports the other two scss files. Created if does not exist before |

### Clean

Removes files from the specified paths.

> Careful, this command is destructive and cannot be undone.

> Warning: if you pass a directory, it will remove it completely, including files not copied with the `export` command.

Accepts the following flags:

+ **--css &lt;path&gt;** : removes the CSS file to this path.
+ **--docs &lt;path&gt;** : removes the docs to this path.
+ **--fonts &lt;path&gt;** : removes the font files to this path.
+ **--force** : execute without confirmation.
+ **--json &lt;path&gt;** : copy the JSON file to this path.
+ **--preprocessor &lt;path&gt;** : copy the SCSS file to this path.

Running:

```bash
cd your/path/to/fancy-icons-project/
npx icomoon-builder clean --preprocessor=scss --css=css --fonts=fonts --docs=docs
```

Will **remove entirely** the following folders:

+ your/path/to/fancy-icons-project/scss
+ your/path/to/fancy-icons-project/css
+ your/path/to/fancy-icons-project/fonts
+ your/path/to/fancy-icons-project/docs

## Todo

- [x] SASS
- [ ] LESS
- [ ] Stylus

## License

[MIT](LICENSE)

## Authors

+ [Ignacio Velazquez](http://ignaciovelazquez.es)