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:
<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"
}