Font Awesome 5 Ember component using SVG with JS
Hey there! We're glad you're here...
If you've used Font Awesome in the past (version 4 or older) there are some things that you should learn before you dive in.
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
This package is for integrating with Ember.js. If you aren't using Ember then it's not going to help you. Head over to our "Get Started" page for some guidance.
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
This package, under the hood, uses SVG with JS and the @fortawesome/fontawesome-svg-core
library. This implementation differs drastically from
the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core
See UPGRADING.md.
You might also be interested in the larger umbrella project UPGRADING.md
This project is an Ember addon. So we'll add that first:
$ ember install @fortawesome/ember-fontawesome
We need at least one style. Let's start with the free version of Solid.
$ npm i --save-dev @fortawesome/free-solid-svg-icons
or with Yarn
$ yarn add --dev @fortawesome/free-solid-svg-icons
Brands are separated into their own style and for customers upgrading from version 4 to 5 we have a limited number of Regular icons available.
Visit fontawesome.com/icons to search for free and Pro icons
$ npm i --save-dev @fortawesome/free-brands-svg-icons
$ npm i --save-dev @fortawesome/free-regular-svg-icons
Do this for each icon pack you'll use in your app. By default, all installed
icon packs will be bundled into vendor.js
and also added to the Font Awesome
library (i.e. library.add()
)
If you are a Font Awesome Pro subscriber you can install Pro packages.
$ npm i --save-dev @fortawesome/pro-solid-svg-icons
$ npm i --save-dev @fortawesome/pro-regular-svg-icons
$ npm i --save-dev @fortawesome/pro-light-svg-icons
Using the Pro packages requires additional configuration.
If you want to include only a subset of icons from an icon pack, add a
fontawesome
configuration object to your applications options in
ember-cli-build.js
. The following example declares that all icons in
free-solid-svg-icons
should be included in the vendor.js
bundle add
added to the library, and for pro-light-svg-icons
, only adjust
,
ambulance
, and pencil-alt
are to be included in the bundle and added to the library.
// ...
let app = new EmberApp(defaults, {
// Add options here
fontawesome: {
icons: {
'free-solid-svg-icons': 'all'
'pro-light-svg-icons': [
'adjust',
'ambulance',
'pencil-alt'
]
}
})
Out of the box, icons will use the Solid style unless a prefix is manually specified.
To change the default to Regular or Light, add a fontawesome
configuration object
to your application's environment.js
and set the defaultPrefix
option.
module.exports = function(environment) {
let ENV = {
// Add options here
fontawesome: {
defaultPrefix: 'fal' // light icons
}
};
// ...
return ENV;
};
As a reminder, the free version of Font Awesome does not include a complete set of icons for any style other than Solid, so this setting is recommended only for Pro subscribers.
This is what it can look like in your template:
Without a prefix specified, the default specified in environment.js
(or fas
, if none set) is assumed:
If you want to use an icon from any style other than the default, use prefix=
.
The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.
Size:
Flip horizontally, vertically, or both:
Spin and pulse animation:
Power Transforms:
<span class="fa-layers fa-lg">
{{fa-icon 'circle'}}
{{fa-icon class='fa-inverse' 'check' transform='shrink-6'}}
</span>
<span class="fa-layers fa-lg">
{{fa-icon 'circle'}}
<span class="fa-layers-text">8</span>
</span>
git clone <repository-url>
this repositorycd ember-fontawesome
npm install
ember serve
- View the demo app at http://localhost:4200.
npm test
(Runsember try:each
to test addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.
- Edit
package.json
and update the version number - Add new contributors to the
contributors
section - Update the
CHANGELOG.md
npm run build
andnpm test
npm publish
git add . && git commit -m 'Release VERSION'
git push
- Create a new release with
CHANGELOG
details