@hashicorp/ember-flight-icons

ember-flight-icons

An Ember addon for the icons from flight. Currently in development.

Goals:

• Accessible
• Easy to use
• Easy to maintain
• Sensible defaults

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v10 or above

Installation

This package has not yet been published. Once it has, you can install it like any other Ember addon:

ember install @hashicorp/ember-flight-icons

Usage

Required usage

The name must be specified. A default icon size of 16 is provided.

<FlightIcon @name="activity" />

Optional usage

Icons are set to a viewBox square size of 16 by default.

<FlightIcon @name="activity" />

Currently, we support a viewBox square size of 16 or 24. If you need your icon to be larger than 16, pass in size.

<FlightIcon @name="activity" @size="24" />

Icons are set to display: inline-block by default. To remove this, set isInlineBlock to false:

<FlightIcon @name="archive" @isInlineBlock={{false}} />

Icons are set to fill="currentColor" by default. To change this, set the desired color:

<!-- Preferred method to ensure consistency: using a :root variable -->
<FlightIcon @name="alert-circle" @color="var(--danger-d1)" />

<FlightIcon @name="alert-circle" @color="rgb(186, 34, 38)" />

<FlightIcon @name="activity" @color="red" />

Additional CSS classes can be appended to the component. Note: a class name that tries to set a color or size for the icon will be ignored by the component.

<FlightIcon @name="meh" class="demo" />

Note

The id is automatically generated by the component, and will be unique.

Accessibility

Accessibility support for SVGs is inconsistent across browsers and assistive technology. Currently, best practice is to set the aria-hidden attribute to false on the SVG itself. This means that the <FlightIcon> component will need to be used in context. The icons themselves are for presentation purposes only and should never be used on their own.

Example:

<button aria-label="Check Activity">
  <FlightIcon @name="activity" />
</button>

<h2><FlightIcon @name="activity" />Activity Report</h2>

Contributing

See the Contributing guide for details.

License

This project is licensed under the Mozilla Public License 2.0.