The icon ui component is used to assist the user and make the components easier to understand.
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">
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
}