ember-accessible-icon
v2.0.0
Published
Accessible icon component for ember.js.
Downloads
105
Readme
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
ember install:addon ember-accessible-icon
- Customize CSS to your liking (add hidden classes to fallbacks) - see demo for example
- 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/.