fxos-icons
Installation
$ npm install fxos-icons
Then include folowing file in HTML
<link rel="stylesheet" href="node_modules/fxos-icons/fxos-icons.css">
Usage
Use i
tag to represent an icon.
<i data-icon="camera" data-l10n-id="camera"></i>
Examples
Accessibility
aria-label
will be added automatically when data-l10n-id
attribute is specified in target element.
<i data-icon="camera" data-l10n-id="camera"></i>
If the icon is for present only, add aria-hidden
attribute to make it unreachable by the screen reader.
<i data-icon="camera" aria-hidden="true"></i>
If the icon is included in certain component, try integrate it as component's data-icon
attribute and handle the accessiblity related issues automatically.
If aria-hidden
is not used on the icon, it will always be accessible to the screen reader. Adding data-l10n-id
to the element with data-icon
that points to {property}.ariaLabel
in the properties file (that will add an aria-label
attribute to the same element and will not touch inner HTML).
Contributions
If you wish to make changes to the icon font you'll need to follow these steps:
- Add, remove or change respective
.svg
files insideimages/
. - Run
$ npm install
to get pull in all the required build tools. - Make sure you have
fontforge
andttfautohint
installed on your machine. The grunt-webfont installation guide outlines the prerequisites. - Run
$ grunt
. - Load
index.html
locally in your browser and check your icon looks good. - Submit a pull request.
- Module owner will review, land, and stamp a new version.
Guidelines
For best results, it is recommended to follow these guidelines:
- Make the document 30px × 30px (In Inkscape: File > Document Properties... > Custom size).
- Make the icon 24px × 24px.
- Center the icon (In Inkscape: Object > Align and Distribute... > Align relative to page).
- Make sure to have only one
<path>
with no overlap per icon. - Optimise the icons using svgo, then export to plain SVG file (
$ inkscape -l icon.svg icon.svg
).
Please also make sure new icons naming is consistent with existing ones:
- Use lower case only.
- Separate words with hyphens.
- Use meaningful words rather than acronyms (e.g.
top-left-crop-corner
instead oft-l-crop-corner
).
Gaia usage
Gaia hackers, please read the introduction to 'Version controlled packages in Gaia' to find out how to use this package in your Gaia app.
Get a report
You can get a report of unused icons on a project by doing:
$ node bin/report.js path/to/your/project/
Please note, that dynamically inserted icons may still be marked as unused in the report.
Lint check
Run lint check with command:
$ npm run lint
Current owners
- Wilson Page [:wilsonpage]