Größe von "Dynamic Icons" ändern

[DoubleH]

Hallo

ich verzweifle ein wenig.
Ich möchte vom Icon icon.battery die Größe ändern.
Wie stelle ich das an.

Vielen Dank im Voraus für Eure Hilfe

Gruß
Daniel

[thengsty]

Hi!
Die SVG-icons sind über CSS anpassbar, wie auch in der Doku beschrieben:

".svg-images only need a style-sheet, defined in the design"

icon.PNG
würde allerdings nicht empfehlen das in der "base.css" zu tun, sonst bekommst du beim nächsten Update von SmartVISU mitunter Stress wenn die Datei überschrieben wird.
In deinem page-ordner sollte es eine "visu.css" geben. Ich würde mal versuchen deine Anpassungen dort zu hinterlegen um base.css so zu überschreiben...

Grüße

[DoubleH]

Hallo thengsty

Danke für Deine Antwort!
Das dachte ich auch. Aber das gilt nur für "normale" icons nicht aber für die dynamischen wie icon.battery.

Zumindest werden bei mir nach der Änderung von .icon alle Icons größer, nur nicht das dynamische...

Gruß
Daniel

[DoubleH]

Ich konnte das Problem lösen und möchte kurz meinen Ansatz erklären.
Evtl. hilft es einem anderen Einsteiger weiter...

Ich habe eine neue klasse dynamicicon in der visu.css angelegt

.dynamicicon .icon {
  width: 100px;
  height: 100px;
}

und dann das icon.battery in der neuen klasse aufgerufen

<div class="dynamicicon">
                {{ icon.battery('icon4', '', 'KG.StromPv.SbAktuell.Ladezustand', '', '100', '#32CD32') }}
            </div>

damit funktioniert es.

[thengsty]

Jo, genau.
Das sollte aber auch über die ID des Icons funktionieren, dann kannst du dir das zusätzliche div sparen...

#index-icon4.icon.icon1{
width: 200px;
height: 200px;
}

"index" ist deine Smartvisu-Seite in der das icon eingebunden wurde.

[DoubleH]

Ok, das teste ich gleich noch.
Vielen Dank!

Gruß
Daniel