g-fontasticbundler

Licence: MIT

Copyright (C) 2018-2019 ConsidoNet Solutions

www.considonet.com

What is Fontastic?

Fontastic is an online icon font generator tool, free even for commercial use. It offers a vast choice of free icons and also allows to import and convert your own SVG file. I've found it extremely useful in our projects and decided to integrate it into G-Build -based building process. This package is a core dependency for G-Build and its internal module.

Fontastic allows you to download the fonts and use the icons locally but also offers excellent cloud-based hosting service (paid for commercial projects, free for personal use). To use the bundler just publish the font to the cloud (it's not against the licence) and provide proper parameters. This tool will download the assets each time you run it but your final project will not be relying on Fontastic Cloud - the files will be stored locally.

The configuration is integrated with G-Build. However if you would like to use this bundler in a separate project without G-Build, below you can find the short API doc.

How does the bundler work?

The bundler downloads the font files and parses the CSS style. On output you'll get a SCSS file with all the icon definitions + references to included webfont files according to your setup.

API

The API is exposed as a class. As for now there is no CLI interface (it's available in G-Build).

Usage:

const FontasticBundler = require("@considonet/g-fontasticbundler");
const bundler = new FontasticBundler();

bundler.bundle(
  "aaAAaaAAAaaaaa",       // The Fontastic package ID
  "./css",                // Path to your CSS directory root     
  "./css/fonts",          // Path to your font directory root
  "./css/fontastic.scss"  // Path to generated SCSS file with icon definitions
); 

Output directory structure for such a config:

css
│   fontastic.scss 
│
└───fonts
│   │   myfont.eot
│   │   myfont.svg
│   │   myfont.ttf
│   │   myfont.woff

Icon usage

HTML:

<!-- no additional CSS/SCSS markup required (compatible with default Fontastic usage) -->
<div class="icon-myicon1"></div>
<div data-icon="myicon1"></div>

<!-- see the examples below: simple one-time usage -->
<div class="myicon"></div>

<!-- see the examples below: extended usage -->
<div class="el__icon el__icon--myicon"></div>

SCSS (superpowers added by this bundler):

// Loading the file generated by the bundler
@import "./fontastic.scss";

// Simple one-time usage
.myicon::before {
    @include icon(myicon1, true); // where 'true' indicates if the mixin should load all the styles or just set content attribute
}

// Extended usage (BEM used there)
.el__icon {

    // General
    &::before {
        @include fIcon(); // loads the styles but doesn't set the content attribute    
    }
    
    // Icons
    // We don't set true for the second parameter because the styles are already set by the .el__icon class
    &--myicon1::before {
        @include icon(myicon1);
    }
    
    &--myicon2::before {
        @include icon(myicon2);
    }
    
}

FAQ

Where to get the Fontastic ID from?

After publishing the font into Fontastic Icon Font Cloud you'll get a similar code: <link href="https://file.myfontastic.com/xyZrJ9fqwKbjbLoy8TUiWh/icons.css" rel="stylesheet">

xyZrJ9fqwKbjbLoy8TUiWh is the code you are looking for.