SVG Icons

Owned by Sarah Padilla (Unlicensed)

Last updated: Jun 03, 2017

5 min read

Here are the different SVG icons to choose from

SVG Code Data Explained

Here is an example svg gauge data.

{
  mainText	: 'Water',
  mainValue	: "22%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'waterdrop',
  fillColor	: 'blue',
  fillValue	: 22,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

The right side is where the user can define what they would like to display. For example the mainText is Water. The mainValue and fillValue must match in order for the svg to be filled to the proper amount. fillColor defines what color the svg will be filled with. However if fillColor is taken out, the color will be set to a the svg's default color. btIcon and btIconText defines what icon and text will appear in the bottom left. The last 5 lines (range, pointId, original, and fold) are only necessary if the point has a history.

Waterdrop

For the water icon the view in the data must say waterdrop

Here is an example of what the data could be

{
  mainText	: 'Water',
  mainValue	: "22%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'waterdrop',
  fillValue	: 22,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

Sun

For the sun icon the view in the data must say sun

Here is an example of what the data could be

{
  mainText	: 'Heating',
  mainValue	: "64%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'sun',
  fillColor	: 'orange',
  fillValue	: 64,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

Energy

For the lightning icon the view in the data must say energy

Here is an example of what the data could be

{
  mainText	: 'Energy',
  mainValue	: "37%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'energy',
  fillColor	: 'yellow',
  fillValue	: 47,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

Light

For this lightbulb icon the view in the data must say light

Here is an example of what the data could be

{
  mainText	: 'Energy',
  mainValue	: "64%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'light',
  fillColor	: 'blue',
  fillValue	: 64,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

Snowflake

For the snowflake icon the view in the data must say snowflake

Here is an example of what the data could be

{
  mainText	: 'Cooling',
  mainValue	: "37%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'snowflake',
  fillColor	: 'lightblue',
  fillValue	: 37,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

Tree

For the tree icon the view in the data must say tree

Here is an example of what the data could be

{
  mainText	: 'Used',
  mainValue	: "80%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'tree',
  fillColor	: 'green',
  fillValue	: 80,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}

Light2

For this lightbulb icon the view in the data must say light2

Here is an example of what the data could be

{
  mainText	: 'Energy',
  mainValue	: "72%",
  btIcon	: 'icon-calendar',
  btIconText: "Last Day",
  view		: 'light2',
  fillColor	: 'purple',
  fillValue	: 72,
  range		: 'today()',
  pointId   : p.id,
  index     : index,
  original  : p,
  fold      : 'live'
}