Feather: Add support for EmberJS in docs

[oleoneto]

Getting Feather to work with Ember is quite simple. I think the README could be updated to include how to use icons with the framework.

Here are the steps I followed:

1. Install Feather

npm install feather-icons --save

1. Add CommonJS modules support

ember install ember-cli-cjs-transform

1. Add reference to ember-cli-build.js

...
app.import('node_modules/feather-icons/dist/feather.js', {
    using: [
      { transformation: 'cjs', as: 'feather' } // <-- enables `import 'feather'` from anywhere in the application
    ]
});

1. In my case, I call feather.replace() from within a component's javascript file:

// app/components/home.js
import Component from '@ember/component';
import feather from 'feather'; // <-- using the transform name

export default Component.extend({
  feather: feather, // <-- here

  didInsertElement() {
    this.feather.replace(); // <-- replaces all references to data-feather with the correct SVGs
  }
});

1. In the corresponding component template file I simply add the data-feather tag to the elements I want to replace with an icon:

<!-- app/templates/components/home.hbs -->
<span data-feather="home"></span> Home

Done.

[brunoocasali]

Thanks for your guidance @oleoneto :)

I've adapted your idea to a modifier approach (it's my first actually haha):

// app/modifiers/render-feather-icons.js
import { modifier } from "ember-modifier";
import feather from "feather";

export default modifier(() => feather.replace());

<nav class="navbar" {{render-feather-icons}}>
  <div class="navbar-brand">
    <div class="navbar-item">
      <span class="icon is-big has-text-black">
        <i data-feather="award"></i>
      </span>
    </div>
  </div>
  ...

This way we could define the feather import just once and reuse it all over the place ;)

emberrocks

[oleoneto]

@brunoocasali I quite like this approach!