Home

Awesome

aurelia-fontawesome

Font Awesome 5 Aurelia component using SVG with JS

Build Status Conventional Commits

Inspired by: react-fontawesome and vue-fontawesome

Installation

Visit fontawesome.com/icons to search for free and Pro icons

$ npm i --save @fortawesome/fontawesome-svg-core

Select one or all icon libraries

$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons

Aurelia Plugin

$ npm i --save aurelia-fontawesome

Usage

In your Aurelia bootstrap file, add the plugin:

Zero Configuration

import { PLATFORM } from "aurelia-framework";

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName("aurelia-fontawesome"));

  // other code ...

  return aurelia
    .start()
    .then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}

Default Configuration

import { PLATFORM } from 'aurelia-framework';
import { fab } from "@fortawesome/free-brands-svg-icons";
import {
  faCircle,
  faHome,
  faSpinner,
  faCoffee,
  faMugHot
} from "@fortawesome/free-solid-svg-icons";

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-fontawesome'), {
      iconOptions: { /* bindable property defaults here (e.g rotation: 0) */ },,
      icons: [ fab, faCircle, faHome, faSpinner, faCoffee, faMugHot ]
    });

  // other code ...

  return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

Explicit Import

Explicitly import the icon(s) into your view model(s)

foobar.js

import { faCoffee } from "@fortawesome/free-solid-svg-icons";

export class FooBarViewModel {
  coffeeIcon = faCoffee;
}

foobar.html

<template>
  <font-awesome-icon icon.bind="coffeeIcon"></font-awesome-icon>
</template>

Explicitly importing icons like this allows us to subset Font Awesome's thousands of icons to include only those you use in your final bundled file. for an alternative approach check out webpack loader aurelia-fontawesome-loader

Non FAS icons

foobar.js

export class FooBarViewModel {}

foobar.html

<template>
  <font-awesome-icon icon.bind="['fab', 'apple']"><font-awesome-icon>
  <font-awesome-icon icon.bind="['fab', 'microsoft']"><font-awesome-icon>
  <font-awesome-icon icon.bind="['fab', 'google']"><font-awesome-icon>
</template>

The "check-square" icon is getting a default prefix of fas here too, which is what we want, because that icon also lives in the @fortawesome/free-solid-svg-icons package.

However, the "apple", "microsoft", and "google" brand icons live in the package @fortawesome/free-brands-svg-icons. So we need to specify a different prefix for them—not the default fas, but fab, for Font Awesome

Binding Variations

Dependencies

Building The Code

To build the code, follow these steps.

  1. From the project folder, execute the following command:
npm install
  1. To build the production files, run:
npm run build
  1. You will find the compiled code in the dist folder, available in various module formats.

Running The Tests

To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps:

  1. For single execution run:
npm run test
  1. For continuous tdd style:
npm run test:watch

Running The Examples

  1. From the project folder, execute the following command:
npm start