Icons

In groundhog since v0.1.1

Examples


<svg role="img" class="icon icon--small">
  <use xlink:href="#ruxit"></use>
</svg>


<svg role="img" class="icon icon--green">
  <use xlink:href="#ruxit"></use>
</svg>


<svg role="img" class="icon icon--blue icon--big">
  <use xlink:href="#ruxit"></use>
</svg>

Introduction

The Groundhog icon component is based on simple SVGs. This ensures resolution and color independent icons which can be used easily. An icon should be used to make an action more recognizable, but could also be used to visually enhance another component on your screen.

Including the icon component

To include the Groundhog icon component first create the <svg> and <use> elements:
```
<svg>
<use></use>
</svg>
```
Apply the styling by adding the Groundhog classes to the class attributes of the elements:
```
<svg class="icon icon--green">
<use></use>
</svg>
```
Reference the icon you want to display in the <use> via the xlink:href attribute. Keep in mind that the icon in question needs to be defined in the symbols map on that page. You can find how to do that in the prerequisites section.
```
<svg class="icon icon--green">
<use xlink:href="#ruxit"></use>
</svg>
```
To make the markup more semantic, you can choose to add role attribute to the svg element:
```
<svg role="img" class="icon icon--green">
...
</svg>
```

Icon colors

Icon class	Output
`icon--grey`
`icon--blue`
`icon--green`
`icon--yellow`
`icon--red`
`icon--black`
`icon--white`

Icon size modifiers

Icon class	effect
-	By default the icon renders in 32 x 32px
`.icon--small`	Renders a small 18 x 18px icon
`.icon--big`	Renders a large 64 x 64px icon

Prerequisites

For the icons to render correctly via the <use> reference, the icons in question need to be defined somewhere on the page. These so called definitions should be defined before the first reference of the icon.

Creating a definition

To create an icon definition, first create an svg element <svg> in your markup:
```
<svg>
</svg>
```
Add the necessary xmlns attribute to the svg element. This tells the browser that the element uses the svg namespace:
```
<svg xmlns="http://www.w3.org/2000/svg">
</svg>
```
This element will usually render on the viewport. To keep the definition element from interfering with the page layout, you should set width, height and display. Additionally aria-hidden can be set as well
```
<svg xmlns="..." style="width:0; height:0; display: none;" aria-hidden="true">
</svg>
```
Add a <symbol> element for every icon you will need on the page and set the id attribute of the <symbol> element
```
<svg xmlns="..." style="...">
<symbol id="ruxit"></symbol>
</svg>
```
Dynatrace styled icons are typically positioned inside a 512 x 512 unit viewbox. The viewbox should be set on the symbol element:
```
<svg xmlns="..." style="...">
<symbol id="ruxit" viewbox="0 0 512 512"></symbol>
</svg>
```
Input the actual svg data of the icon itself. Make sure that there are no fill attibutes set on the svg elements in order to ensure that themecolor classes will work.
```
<svg xmlns="..." style="...">
<symbol id="ruxit" viewbox="0 0 512 512">
 <rect x="10" y="10" width="100" height="100"/>
</symbol>
</svg>
```

Beware! Only include icons you will actually need on this page into the definition to keep the page-weight to a minimum.