Elliot Dahl
Bei Pivotal haben wir ein SVG-Icon-System mit React für die Nutzung auf unserer Produktsuite entwickelt. Dieser Artikel handelt von meinem Ansatz zur Gestaltung des SVG-Icon-Systems mit CSS, um die Nutzung einfach und effektiv zu gestalten.
Ausrichtung und Icons (jeglicher Art) werden wahrscheinlich immer ein wenig knifflig sein. Es hängt von zwei Dingen ab, die auf jeder Website unterschiedlich sein werden: der Schriftart und den Icons. Elliot konnte perfekte Ausrichtung mit Arial erreichen, indem er die Icons mit bottom: -0.125em; nach unten zog, da Arial genau auf der Grundlinie sitzt und die Icons selbst mit 12,5 % Weißraum um die Ränder herum gestaltet wurden. Es ist eine ziemlich gängige Praxis, SVG-Icons mit etwas Abstand zu den Rändern zu gestalten (so ärgerlich das für die Ausrichtung auch sein mag), denn ohne diesen Abstand könnten Sie bei bestimmten Browsern/Auflösungen/Zooms/usw. unangenehme Clipping-Effekte an den Rändern erhalten (tut mir leid, ich habe keine weiteren Details zur Hand).