A webpack loader for aurelia-fontawesome

The loader makes it super easy to use the aurelia-fontawesome component with webpack. When the loader is configured properly you can simply write the following in your aurelia views:

<font-awesome-icon icon="coffee"></font-awesome-icon>

or

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

The coffee icon is automatically added as a dependency to the view and the icon is loaded when needed. This ensures that the final produced bundle/chunk only contains the icons that are actually used. Moreover, it also reduces the hassle of adding the icons one-by-one to the font-awesome library.

Install the loader with npm

$ npm i --save-dev aurelia-fontawesome-loader

The loader transforms the html files with the following changes:

• It adds a <require from="..."></require> for each icon it detects in <font-awesome-icon icon="..."></font-awesome-icon> to ensure that the icon becomes a dependency to the view.
• It rewrites the icon property such that the fontawesome binding behavior is invoked which ensures that the icon is loaded before it is passed on to the icon property on the element. An example is <font-awesome-icon icon="coffee"></font-awesome-icon> which is rewritten to <font-awesome-icon icon.bind="'coffee' & fontawesome"></font-awesome-icon> See the sample app here for more examples on how the loader works.

You can see the sample webpack configuration using the loader here. Two things needs to be configured for the loader to work propertly.

1. The loader must be used for html files. It needs to run before the html-requires-loader which is included by default in the aurelia-webpack-plugin.

module: {
  rules: [
    {
      test: /\.html$/,
      use: [
        // The order of the loaders are important
        "html-loader",
        "aurelia-webpack-plugin/html-requires-loader",
        "aurelia-fontawesome-loader/loader"
      ]
    }
  ]
}

The loader resolves to the free icon set by default - you can use the loader with the pro option if you have that license. This is easiest done by setting the loader to "aurelia-fontawesome-loader/loader?pro".

2. Tell the aurelia-webpack-plugin that it should not automatically insert the html-requires-loader:

plugins: [
  new AureliaPlugin({
    noHtmlLoader: true
  })
]

3. Tell your aurelia app to include the loader binding behavior that brings in icons as needed. Do this by inserting the following in your code during aurelia boot

aurelia.use.plugin(PLATFORM.moduleName('aurelia-fontawesome-loader'))