Rebanna NPM | npm.io

Rebanna

Rebanna is build to easily create a webfont with the support of stacked/multicolored icons.

Changeable color

Getting started

Prerequisites

NPM. Rebanna can be installed through npm. When you install Node.js, the package manager will also be installed.
Windows-Build-Tools - Run as administrator npm install --global --production windows-build-tools.

Installing

To install rebanna, run the following on the command line:

npm install rebanna

Usage

Configuration

Configuration can be done by command-line arguments or through a .rebanna.js-file. First, command-line arguments will be used, followed by settings from the config file. Any non-set options will be default.

`.rebanna.js` example

module.exports = {
  // the destination for the generated webfont
  "destination": "./font",
  // name for the font
  "fontName": "iconfont",
  // classname prefix for the icons
  "fontClassName": "icon",
  // source folder for the icons
  "iconFolder": "./icons",
  // temporary folder
  "tempFolder": "./.tmp",
  // templates for generating html, css or scss
  "template": [
    "./templates/template.html.njk"
  ],
}

Running

Creating a webfont from SVG's with rebanna typically follows these steps:

Store the correctly formatted SVG's in the icons folder.
Run npm run build on the command line to generate your webfont and template.

CLI

Next, to the npm scripts, a CLI is available. Run rebanna [command] [options] to generate your webfont and template.

Commands

Command	Description
`build`	Run clean, compress and split commands, Builds the webfont. Before building clean, compress and split commands will be run.
`clean`	Cleans the destination and temporary folder.
`compress`	Compresses all SVG files found in the icon source folder.
`split`	Split all compressed SVG files from the temporary folder.

Options

Options	Description
`--clean`	Run clean also on build.
`-c`, `--config`	Path to a specific configuration file.
`--debug`	Show extra information for debugging.
`-d`, `--destination`	The destination for the generated webfont.
`--fontName`	The name for the font.
`--fontClassName`	The classname prefix for the icons.
`--fontTemplatePath`	Font path that will be used in generated templates.
`-i`, `--iconFolder`	The source folder for the icons.
`--tempFolder`	Temporary folder for processing.
`--template`	An array of Nunjucks templates for generating HTML, CSS or SCSS. More information about Nunjucks templates can be found at https://bit.ly/2v0E7Ha.
`--watch`	Add this option if you want the iconFolder to be watched. Triggers `build` on added, changed or removed file.

About

Ever thought about the correct name for a multi-layered-svgs-to-stacked-icons-from-a-webfont tool? I have, it's terrible, believe me. Therefore I just named it after a very special person who often makes me a stack of super fluffy banana pancakes :)

Rebanna helps you creating a multicolored iconfont. Each layer can easily be styled with CSS.