Merge pull request FortAwesome#185 from jrjohnson/octaneify

Octaneify FaIcon Component

README.md

@@ -21,7 +21,7 @@ Compatibility
   * [Upgrading Font Awesome?](#upgrading-font-awesome)
   * [Get started](#get-started)
   * [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
-  * [Going from 0.0.x to 0.1.0](#going-from-00x-to-010)
+  * [Upgrading From Previous Versions](#upgrading-from-previous-versions)
 - [Installation](#installation)
   * [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
   * [Subsetting icons](#subsetting-icons)
@@ -65,7 +65,7 @@ the web fonts implementation that was used in version 4 and older of Font Awesom
 
 > https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
 
-### Going from 0.0.x to 0.1.0
+### Upgrading From Previous Versions
 
 See [UPGRADING.md](./UPGRADING.md).
 
@@ -207,12 +207,6 @@ This is what it would look like in your template:
 ```hbs
 <FaIcon @icon="coffee" />
 ```
-All examples use angle bracket invocation available in Ember 3.4+. Using Ember's classic component invocation the example above would be:
-
-```hbs
-{{fa-icon "coffee"}}
-```
-For details see [Angle Bracket Syntax](https://guides.emberjs.com/release/reference/syntax-conversion-guide/#toc_angle-bracket-syntax) in the Ember documentation.
 
 Without a prefix specified, the default specified in `environment.js` (or `fas`, if none set) is assumed:
 

UPGRADING.md

@@ -6,6 +6,13 @@ This guide is useful to figure out what you need to do between breaking changes.
 
 As always, [submit issues](https://github.com/FortAwesome/ember-fontawesome/issues/new) that you run into with this guide or with these upgrades to us.
 
+## 0.2.x to 0.3.0
+
+Dropped support for classic `{{fa-icon "coffee"}}` invocation, you must now use `<FaIcon @icon="coffee">`
+
+All attributes passed to component will now end up on the output.
+e.g. `<FaIcon @icon="coffee" title="foo" aria-labbeledby="bar">`. In past versions only some attributres were accounted for and may have required an `@` sign.
+
 ## 0.0.x to 0.1.0
 
 ### Renamed packages

addon/components/fa-icon.hbs

@@ -0,0 +1,20 @@
+{{#if this.iconExists}}
+    <svg
+        style={{this.safeStyle}}
+        class={{this.iconAttributes.class}}
+        data-prefix={{this.dataPrefix}}
+        data-icon={{this.dataIcon}}
+        data-fa-transform={{this.dataFaTransform}}
+        data-fa-mask={{this.dataFaMask}}
+        data-fa-processed={{this.dataFaProcessed}}
+        aria-hidden={{this.ariaHidden}}
+        aria-labelledby={{this.ariaLabelledBy}}
+        focusable={{this.iconAttributes.focusable}}
+        role={{this.iconAttributes.role}}
+        xmlns={{this.iconAttributes.xmlns}}
+        viewBox={{this.viewBox}}
+        ...attributes
+    >
+        {{this.content}}
+    </svg>
+{{/if}}