cloud.gov pattern library

icon-ui

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:

<!-- Chevron Left -->
<svg class="icon icon-fill  icon-chevron-left">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>


<!-- Chevron Right -->
<svg class="icon icon-fill  icon-chevron-right">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>


<!-- Chevron Down -->
<svg class="icon icon-fill  icon-chevron-down">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>


<!-- Chevron Up -->
<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>


<!-- Chevron Left White -->
<svg class="icon icon-fill icon-white icon-chevron-left">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>


<!-- Chevron Right White -->
<svg class="icon icon-fill icon-white icon-chevron-right">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>


<!-- Chevron Down White -->
<svg class="icon icon-fill icon-white icon-chevron-down">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>


<!-- Chevron Up White -->
<svg class="icon icon-fill icon-white 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>
 
/* Chevron Left */
{
  "iconKind": "chevron",
  "iconOrientation": "left"
}


/* Chevron Right */
{
  "iconKind": "chevron",
  "iconOrientation": "right"
}


/* Chevron Down */
{
  "iconKind": "chevron",
  "iconOrientation": "down"
}


/* Chevron Up */
{
  "iconKind": "chevron",
  "iconOrientation": "up"
}


/* Chevron Left White */
{
  "iconKind": "chevron",
  "iconOrientation": "left",
  "iconWhite": true
}


/* Chevron Right White */
{
  "iconKind": "chevron",
  "iconOrientation": "right",
  "iconWhite": true
}


/* Chevron Down White */
{
  "iconKind": "chevron",
  "iconOrientation": "down",
  "iconWhite": true
}


/* Chevron Up White */
{
  "iconKind": "chevron",
  "iconOrientation": "up",
  "iconWhite": true
}