Ember-accessible-icon

Accessible, bulletproof icons for Ember CLI - IE 7+

Keep your icons accessible, using this binding-friendly component. Produces the same markup generated by a font garde, discussed by the Filament Group.

Detecting Font Support

Since each project has its own varied support and supported browsers, I opted to not include any feature detection. To do this, include these scripts in your Brocfile.js:

New in version 2.0.0: support for SVG icons

npm install --save-dev afontgarde

app.import("../node_modules/a-font-garde/lib/faceoff.js");
app.import("../node_modules/a-font-garde/lib/modernizr.fontface-generatedcontent.js");

Installation

1. ember install:addon ember-accessible-icon
2. Customize CSS to your liking (add hidden classes to fallbacks) - see demo for example
3. Enjoy

Usage

Basic Usage:

{{accessible-icon icon="wrench"}}

Renders:

<icon class="ember-view accessible-icon icon-fallback-glyph has-fallback">
	<span class="icon icon-wrench" aria-hidden="true"></span>
	<span class="icon-fallback-text">Wrench</span>
</icon>

With title:

{{accessible-icon icon="arrow-right" title="Continue to Log In"}}

Renders:

<icon class="ember-view accessible-icon icon-fallback-glyph has-fallback" title="Continue to Log In">
	<span class="icon icon-arrow-right" aria-hidden="true"></span>
	<span class="icon-fallback-text">Arrow-right</span>
</icon>

With alternative fallback:

{{accessible-icon icon="download" title="Download Video Archive" fallbackType="image"}}

Renders:

<icon class="ember-view accessible-icon icon-fallback-image has-fallback" title="Download Video Archive">
	<span class="icon icon-download" aria-hidden="true"></span>
	<span class="icon-fallback-text">Download</span>
</icon>

Without fallback:

{{accessible-icon icon="download" title="Download Video Archive" fallback=false}}

Renders:

<icon class="ember-view accessible-icon" title="Download Video Archive">
	<span class="icon icon-download" aria-hidden="true"></span>
</icon>

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.