cloud.gov pattern library

icon-ui: Chevron Up

Icon Ui

The icon ui component is used to assist the user and make the components easier to understand.

Use

To use the icon ui icons, follow the same directions as the normal icons and add a icon-fill class to the svg element.

<svg class="icon icon-fill">

Adding new icons

To add a new fill icon, import an svg file into the src/img/ folder with the following naming scheme:

src/img/i-fill-{icon name}.svg

Where icon name is any underscore spaced name of your choice. Additionally, the svg code for the icon must:

<svg class="icon icon-fill  icon-chevron-up">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>
 
<svg class="icon icon-fill {% if iconWhite %}icon-white{% endif %} icon-{{ iconKind }}{% if iconOrientation %}-{{ iconOrientation }}{% endif %}">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-{{ iconKind }}" >
  </use>
</svg>
 
{
  "iconKind": "chevron",
  "iconOrientation": "up"
}