Increase Size Of Icon Not Working

SharpTools.io (web)
1

This is something I’m “playing” with based on a request for gauges to show levels of things. I have a series of gauges uploaded to use with this concept.

  • I’m using a Hero tile for this project
  • I’m using battery level for this project
    -I’m using the Icon and Style section to edit the style states
    -I’m using CSS mostly taken from the CSS WIKI to format the entire Dashboard
  • The Icons are .svg images

I cannot get the gauge icon to increase in size or center. I’ve done it with other .svg icons. Is this something I cannot do with a Hero tile?

Gauge at 10% level
Capture1

Gauge at <= 1
Capture

Style I created for the Gauge tiles

Capture2
Capture2629×676 21.3 KB

Edit States (only 2 while I’m working this out)
Capture3

The entire CSS on this Dashboard. (The last line pertains to this tile)

.tile.–theme-style-active-fan {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}

.tile.–theme-style-active {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}

.tile.–theme-style-headers {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}

.tile.–theme-style-default {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 400;}

.tile .title { line-height: 90%; }

.tile .tile-footer { line-height: 80%; }

.tile.–theme-style-open-big-icon {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-open-big-icon .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
.tile.–theme-style-open-big-icon .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}
.tile.–theme-style-closed-big-icon {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%;}
.tile.–theme-style-closed-big-icon .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
.tile.–theme-style-closed-big-icon .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}
.tile.–theme-style-presence-yes {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-presence-no {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 400;}
.tile.–theme-style-power-on {box-shadow: none; border-radius: 15px; background-image: url(https://i.imgur.com/XXXX.png); background-position: left center; background-repeat: no-repeat; background-size: 200%; font-weight: 600;}
.tile.–theme-style-power-on .icon svg {width: 70%; height: 70%; margin: 0; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%);}
.tile.–theme-style-power-on .icon {
-webkit-filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
filter: drop-shadow(0 0 2px #ffc30B) drop-shadow(0 0 2px #ffc30B);
}

.tile .tile-footer { text-align: center; }
.tile .tile-footer .status span.right { float: inherit!important; }

.tile.–theme-style-Gauge .icon svg {width: 70%; height: 70%}

2

I figured it out. Using img instead of svg does what I want. Not sure why though, they are svg files…

3

Icons that are uploaded typically use an <img> tag to be displayed… that includes complex SVGs with color as well as all other image types like PNG, JPEG, etc.

If you upload a ‘simple’ SVG file with no fill properties set (eg. a single color), it gets embedded inline using an <svg> tag and it can inherit theme colors as noted in the Custom Icons FAQ:

1 Like