Skip to content
Font Awesome 5 Aurelia component
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
aurelia_project
dev-app
dist
doc
src
test
.commitlintrc.json
.editorconfig
.eslintrc
.gitattributes
.gitignore
.huskyrc
.prettierignore
.prettierrc
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE
README.md
azure-pipelines.yml
favicon.ico
index.html
karma.conf.js chore: Move to aurelia-cli and jasmine (#19) Sep 4, 2019
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

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';

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

  • The icon can be an icon object, like icon.bind=${faCoffee}.
  • The icon can be a string, like icon="coffee".
  • The icon can be an Array of strings, where the first element is a prefix, and the second element is the icon name: icon.bind="['fab', 'apple']"
  • The prefix can be bound, the default is fas: prefix="fab" icon="apple"
  • A default prefix can be setup in the plugin configuration: { prefix="fab" }

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
You can’t perform that action at this time.