feat(config): Add prefix to plugin configuration

Default to `fas` as the library does now. When changed, the icon
needs to be recompiled

related #18

Author: jmzagorski

README.md

@@ -12,7 +12,7 @@ Inspired by:
 - [Installation](#installation)
 - [Usage](#usage)
   * [Zero Configuration](#zero-configuration)
-  * [Global Configuration](#global-configuration)
+  * [Default Configuration](#default-configuration)
   * [Explicit Import](#explicit-import)
   * [Non FAS Icons](#non-fas-icons)
   * [Binding Variations](#binding-variations)
@@ -59,7 +59,7 @@ export function configure(aurelia) {
 }
 ```
 
-### Global Configuration
+### Default Configuration
 ```javascript
 import { PLATFORM } from 'aurelia-framework';
 
@@ -128,6 +128,8 @@ _foobar.html_
 - 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
 

dev-app/app.html

@@ -36,12 +36,16 @@ <h2 class="subtitle has-text-centered">(Most examples use the size attribute for
           </div>
           <div class="card-content">
             <p class="title is-4">HTML Attributes</p>
+            <div class="content">
+              The bulma class value "has-text-danger" is passed to the icon
+              to make it red
+            </div>
           </div>
         </div>
         <div class="card column">
           <div class="card-header is-centered">
-            <font-awesome-icon size="2x" icon="spinner" spin.bind="true"></font-awesome-icon>
-            <font-awesome-icon size="2x" icon="spinner" pulse.bind="true"></font-awesome-icon>
+            <font-awesome-icon icon="spinner" spin.bind="true"></font-awesome-icon>
+            <font-awesome-icon icon="spinner" pulse.bind="true"></font-awesome-icon>
           </div>
           <div class="card-content">
             <p class="title is-4">Animations</p>
@@ -56,7 +60,7 @@ <h2 class="subtitle has-text-centered">(Most examples use the size attribute for
       <div class="columns">
         <div class="column card">
           <div class="card-header is-centered">
-            <font-awesome-icon size="2x" icon="home" mask="circle" size="3x"></font-awesome-icon>
+            <font-awesome-icon icon="home" mask="circle"></font-awesome-icon>
           </div>
           <div class="card-content">
             <p class="title is-4">Masking</p>
@@ -69,38 +73,51 @@ <h2 class="subtitle has-text-centered">(Most examples use the size attribute for
         </div>
         <div class="column card">
           <div class="card-header is-centered">
-            <font-awesome-icon size="2x" icon.bind="icon"></font-awesome-icon>
+            <font-awesome-icon icon.bind="icon"></font-awesome-icon>
           </div>
           <div class="card-content">
             <p class="title is-4">Reactive</p>
             <div class="content">
+              <p>
+                The icon will be recreated when a bindable property is changes.
+              </p>
               <button
                 class="button"
                 click.delegate="icon=(icon==='coffee' ? 'mug-hot' : 'coffee')">
-                Brew
+                Change bound icon
               </button>
             </div>
           </div>
         </div>
         <div class="column card">
           <div class="card-header is-centered">
-            <font-awesome-icon size="2x" icon.bind="[ 'fab', 'microsoft' ]"></font-awesome-icon>
-            +
-            <font-awesome-icon size="2x" icon.bind="[ 'fab', 'github' ]"></font-awesome-icon>
+            <font-awesome-icon if.bind="!rotated" prefix="fas" icon="coffee"></font-awesome-icon>
+            <font-awesome-icon if.bind="rotated" prefix="fas" icon="coffee"></font-awesome-icon>
           </div>
           <div class="card-content">
-            <p class="title is-4">Brand Icons</p>
+            <p class="title is-4">Plugin Configuration</p>
+            <div class="content">
+              <p>
+                The icon rotation will change for the new icon because the configuration
+                object "rotation" property is being reset
+              </p>
+              <button class="button" click.delegate="changeRotation()">Change default rotation</button>
+            </div>
           </div>
         </div>
         <div class="column card">
           <div class="card-header is-centered">
-            <font-awesome-icon size="2x" if.bind="!coffeeSpilled" icon="coffee"></font-awesome-icon>
-            <font-awesome-icon size="2x" if.bind="coffeeSpilled" icon="mug-hot"></font-awesome-icon>
+            <font-awesome-icon if.bind="prefix" prefix="${prefix}" icon="thumbs-up"></font-awesome-icon>
+            <font-awesome-icon if.bind="!prefix" icon="thumbs-up"></font-awesome-icon>
           </div>
           <div class="card-content">
-            <p class="title is-4">Global Configuration</p>
+            <p class="title is-4">Icon prefix</p>
             <div class="content">
-              <button class="button" click.delegate="spillGlobal()">Spill</button>
+              <p>
+                You can override the default "fas" icon prefix by binding
+                to another prefix in your view or the icon configuration
+              </p>
+              <button class="button" click.delegate="changePrefix()">Change default prefix</button>
             </div>
           </div>
         </div>

dev-app/app.ts

@@ -1,16 +1,25 @@
 import { inject } from 'aurelia-framework';
 
-@inject('globalOptions')
+@inject('defaultOptions')
 export class App {
   message = 'Aurelia Font Awesome 5 Examples';
   icon = 'coffee'
-  coffeeSpilled = false;
+  rotated = false;
+  prefix = 'fas';
 
   constructor(private _options) {
   }
 
-  spillGlobal() {
+  attached() {
+    this._options.prefix = 'far'
+  }
+
+  changeRotation() {
     this._options.rotation = !this._options.rotation ? 270 : 0;
-    this.coffeeSpilled = !this.coffeeSpilled;
+    this.rotated = !this.rotated;
+  }
+
+  changePrefix() {
+    this.prefix = !this.prefix ? 'fas' : null;
   }
 }

dev-app/main.ts

@@ -5,24 +5,27 @@ import {
   faHome,
   faSpinner,
   faCoffee,
-  faMugHot
+  faMugHot,
+  faThumbsUp as fasThumbsUp
 } from '@fortawesome/free-solid-svg-icons';
 import { fab  } from '@fortawesome/free-brands-svg-icons'
+import { faThumbsUp  } from '@fortawesome/free-regular-svg-icons'
 
 export function configure(aurelia: Aurelia) {
   const options = {
-    rotation: 0
+    rotation: 0,
+    size: '2x'
   };
 
-  aurelia.container.registerInstance('globalOptions', options);
+  aurelia.container.registerInstance('defaultOptions', options);
 
   aurelia.use
     .standardConfiguration()
     // load the plugin ../src
     // The "resources" is mapped to "../src" in aurelia.json "paths"
     .feature('resources', {
       iconOptions: options,
-      icons: [ fab, faCircle, faHome, faSpinner, faCoffee, faMugHot ]
+      icons: [ fab, faCircle, faHome, faSpinner, faCoffee, faMugHot, faThumbsUp, fasThumbsUp ]
     });
 
   aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');