The Icons allow for a set of icons to be rendered in a block container or inline next to text. The icons can be colored as either black or “alt” blue. All icons are implemented in svg and are served using the svg use:xlink attribute to specify the specific icon or symbal in the svg sprite file.
Icons can either be used inline by just using the svg or put in a boxed container
called icon-container
that provides a certain standard spacing and sizing.
Inline icons will adjust to the font-size of their parent element. This means
if you put an inline icon with an h2
it’s height will fill the height of the
h2
. They will also add space before and after any sibling element. This means
if you put an icon next to a <span>
or similar inline element, the icon will
take care of adding some spacing between them.
The base set of icons are implemented in svg with strokes. Additionally, there is a set of icons that are implemented using fills, see fill icons.
All currently available main icons are as follows:
Icons can be used inline in text or spaced in a standard way with the icon container.
Include an svg tag with the icon
class along with any color modifier classes
such as icon-alt
. Within the svg tag, the svg use
tag is used, with an
attribute called xlink
. The xlink
attribute has an additonal href
part of
it so the whole thing looks like xlink:href
. The value of this attribute should
be the cloudgov svg sprite, cloudgov-sprite.svg
along with the specific icon
name after a #
. The icon name should always include the i-
part. Be sure to
close the <use>
tag. An example looks like:
<use xlink:href="/img/cloudgov-sprite.svg#i-agreement"></use>
The path to the cloudgov svg sprite may differ depending on project setup.
To add a new fill icon, import an svg file into the src/img/
folder with the
following naming scheme:
src/img/i-{icon name}.svg
Where icon name
is any underscore spaced name of your choice. Additionally,
the svg code for the icon must:
stroke
. If the system the icon was
exported from added rules within the svg elements such as stroke=#222222"
,
these attributes must be removed. Other attributes such as stroke-width
should be left alone.title
tag that expresses what the icon is.0 0
and then some number relating to the width and
height.
<div class="icon-container">
<svg class="icon ">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/img/cloudgov-sprite.svg#i-plan"></use>
</svg>
</div>
<div class="icon-container">
<svg class="icon {% if isAlt %}icon-alt{% endif %}">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/img/cloudgov-sprite.svg#i-{{ iconName }}"></use>
</svg>
</div>
{
"iconName": "plan",
"isAlt": null
}