Rebanna is build to easily create a webfont with the support of stacked/multicolored icons.
- 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
.
To install rebanna, run the following on the command line:
npm install rebanna
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.
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"
],
}
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.
Next, to the npm scripts, a CLI is available. Run rebanna [command] [options]
to generate your webfont and template.
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 | 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. |
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.
Feel free to push your code if you agree with publishing under the MIT license.
See CHANGELOG.md for changes per version.
Copyright © 2018 Maarten Brakkee maarten@zeroten.nl. The license can be found in the LICENSE file.