Diese Icons verwenden das ACSS Icon Framework. In der Komponente kann die Größe des Icons und die gap gesteuert werden. Die Größe wird aus der Property in ein data attribute im Parent gesetzt, welches dann im CSS des Parents ausgelesen wird. Daraus wird die var –icon-size mit –icon-size-s oder -l (m braucht es nicht, normale Größe) definiert, welche wiederum auf das Icon Framework zurückgreift.

Das ist der erste Lösungansatz zum Problem: "Wie style ich semi-global (innerhalb der Component) alle Elemente eines Typs per props?"

Die Theme läßt sich nur über JS steuern, da ACSS keine Variable –icon-color-light o. ä. hat, sondern nur per data attribute data-icon-theme="light / dark" die Variablen –icon-color und –icon-background mit den im ACSS ausgewiesenen Farben (Variablen) verknüpft. Zum Glück kann Robert JS :D – wenn man ihm genau sagt, was man will!

Note to self: Robert fragen, ob man das Script so umbauen kann, dass es vom Parent unabhängig wird und in alle Components einfügen kann, die Icons enthalten.