greenwood-plugin-font-awesome

Overview

A Greenwood plugin for managing Font Awesome related dependencies and assets for building and development.

As of Greenwood v0.31.0 this plugin is no longer required for this kind of functionality as Greenwood can automatically bundle and inline transitive @import and url statements in CSS files.

---

This plugin is useful because Font Awesome references its font files relatively.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

This means that these paths need to be resolved specifically to the right location in node_modules where the Font Awesome package is located. Additionally, this plugin ensures the font files are copied as part of the build process.

Installation

This plugin defines the following peerDependencies, so please make sure you already have them installed first

• @greenwood/cli@^0.20.0
• font-awesome@^4.6.3

Install the plugin using your preferred package manager

# npm
$ npm install @analogstudiosri/greenwood-plugin-font-awesome --save-dev

# yarn
$ yarn add @analogstudiosri/greenwood-plugin-font-awesome --dev

Usage

Simply add this to the plugins array of your greenwood.config.js

import { greenwoodPluginFontAwesome } from 'greenwood-plugin-font-awesome';

export default {
  plugins: [
    ...greenwoodPluginFontAwesome() // notice the spread ... !
  ]
}