Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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:

  1. Add, remove or change respective .svg files inside images/.
  2. Run $ npm install to get pull in all the required build tools.
  3. Make sure you have fontforge and ttfautohint installed on your machine. The grunt-webfont installation guide outlines the prerequisites.
  4. Run $ grunt.
  5. Load index.html locally in your browser and check your icon looks good.
  6. Submit a pull request.
  7. 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 of t-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]
You can’t perform that action at this time.