Clarity UI icons in vRealize Automation

Mar 5, 2019
Share on:

I was looking arround for some uniform icons for vRealize Automation. I came accros Ryan Kelly’s vRA icon pack. This icon pack contains icons for several wellknown applications and services. Unfortunatly they do not have a uniform design nor colorscheme.

While many commercial icon packs are available I wanted some free icons for my lab. I came accross the @VMwareClarity icons which have a uniform design. Since they are part of the same UI framework vRA uses they integrate nicely in vRA. These icons are available at https://clarity.design/icons and are provided in svg format, which is an xml based file containing a vector description of the graphic.

vRA however does not support svg files for use as icons on catalog items. Simply converting them, without customizing them, to a supported format would result in black icons which would lose some of their layout. So before converting these icons the svg files need to be customized to keep their design after conversion.

The content of these svg files looks like:

1<svg version="1.1" width="36" height="36"  viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2    <title>analytics-line</title>
3    <path class="clr-i-outline clr-i-outline-path-1" d="M 32 5 L 4 5 C 2.895 5 2 5.895 2 7 L 2 29 C 2 30.105 2.895 31 4 31 L 32 31 C 33.105 31 34 30.105 34 29 L 34 7 C 34 5.895 33.105 5 32 5 Z M 4 29 L 4 7 L 32 7 L 32 29 Z"></path><polygon points="15.62 15.222 9.602 23.968 5.55 20.384 6.61 19.186 9.308 21.572 15.634 12.38 22.384 22.395 29.138 13.47 30.414 14.436 22.308 25.145" class="clr-i-outline clr-i-outline-path-2"></polygon>
4    <rect x="0" y="0" width="36" height="36" fill-opacity="0"/>
5</svg>

The style of these graphics is specified by the class="…" property in the and elements. To change the design of these icons the ClarityUI css styles need to be changed and specified locally.

For every vector path three css classes can be in use within these files:

  • The main class for every vector path, where distiguishes the vector paths
1    class="clr-i-outline clr-i-outline-path-<X>"
  • The alert vector path uses the alerted style class. This class is only used in alert icons.
1    class="clr-i-solid--alerted clr-i-solid-path-<X>--alerted clr-i-alert"
  • The badge vector path uses and badged style class, which is only used Badged icons contain and bedged class
1    class="clr-i-outline--badged clr-i-outline-path-<X>--badged clr-i-badge"

Below command will create customized svg files and replaces the ClarityUI css classes with fill="<color>". Each above class is replaced by another color to keep the design intact.

1for i in **/*.svg; do printf "$i\n" ; awk -v regex1='class="clr-i-(solid|outline)(--badged|--alerted)? clr-i-(solid|outline)-path-[1-9](--badged|--alerted)?"' -v trgt1='fill="#0079B8"' '{ gsub(regex1, trgt1)}1' $i | awk -v regex2='class="clr-i-(solid|outline)(--badged|--alerted)? clr-i-(solid|outline)-path-[1-9](--badged|--alerted)? clr-i-badge"' -v trgt2='fill="#2F8400"' '{ gsub(regex2, trgt2)}1' | awk -v regex3='class="clr-i-(solid|outline)(--badged|--alerted)? clr-i-(solid|outline)-path-[1-9](--badged|--alerted)? clr-i-alert"' -v trgt3='fill="#C92100"' '{ gsub(regex3, trgt3)}1' > "$(printf $i | sed -e 's/.svg/-custom.svg/g')"; done

The customized svg files can now be converted to a vRA supported format.

1for a in **/*-custom.svg; do rsvg-convert -h 40 $a > "$(printf $a | sed -e 's/.svg/.png/g')"; done