Erstellung eines wartungsfreundlichen Icon-Systems mit Sass

Eine meiner Lieblingsmethoden, um Icons zu einer Website hinzuzufügen, ist, sie als Hintergrundbilder von Data-URLs in Pseudoelementen (z. B. ::after) in meinem CSS einzufügen. Diese Technik bietet mehrere Vorteile

• Sie erfordern keine zusätzlichen HTTP-Anfragen außer der CSS-Datei.
• Mithilfe der background-size-Eigenschaft können Sie Ihr Pseudoelement auf jede gewünschte Größe einstellen, ohne befürchten zu müssen, dass es über die Grenzen hinausragt (oder abgeschnitten wird).
• Sie werden von Screenreadern ignoriert (zumindest in meinen Tests mit VoiceOver auf dem Mac), was gut für rein dekorative Icons ist.

Aber diese Technik hat auch einige Nachteile

• Bei Verwendung als background-image Data-URL verlieren Sie die Möglichkeit, die Farben der SVG mit den CSS-Eigenschaften "fill" oder "stroke" zu ändern (genau wie bei der Verwendung des Dateinamens, z. B. url( 'some-icon-file.svg' )). Wir können filter() als Alternative verwenden, aber das ist möglicherweise nicht immer eine praktikable Lösung.
• SVG-Markup kann groß und unansehnlich aussehen, wenn es als Data-URL verwendet wird, was die Wartung erschwert, wenn Sie die Icons an mehreren Stellen verwenden und/oder ändern müssen.

Wir werden beide Nachteile in diesem Artikel behandeln.

Die Situation

Lassen Sie uns eine Website mit einem robusten Iconographie-System erstellen, und sagen wir, sie hat mehrere verschiedene Button-Icons, die alle unterschiedliche Aktionen anzeigen

• Ein "Download"-Icon für herunterladbare Inhalte
• Ein "externer Link"-Icon für Buttons, die uns zu einer anderen Website führen
• Ein "rechter Pfeil"-Icon, um uns zum nächsten Schritt in einem Prozess zu führen

Direkt am Anfang haben wir also drei Icons. Und auch wenn das nicht viel erscheinen mag, werde ich bereits nervös, wie wartungsfreundlich das sein wird, wenn wir es auf mehr Icons wie Social-Media-Netzwerke usw. ausweiten. Zum Zweck dieses Artikels werden wir bei diesen drei bleiben, aber Sie können sich vorstellen, wie unhandlich ein ausgeklügeltes Icon-System sehr schnell werden kann.

Es ist Zeit, zum Code zu gehen. Zuerst richten wir einen einfachen Button ein und weisen dann unter Verwendung einer BEM-Namenskonvention das richtige Icon seinem entsprechenden Button zu. (An diesem Punkt ist es angebracht, Sie davor zu warnen, dass wir alles in Sass, genauer gesagt SCSS, schreiben werden. Und der Argumenthalber gehen wir davon aus, dass ich Autoprefixer verwende, um Dinge wie die appearance-Eigenschaft zu behandeln.)

.button {
  appearance: none;
  background: #d95a2b;
  border: 0;
  border-radius: 100em;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 1em calc( 1.5em + 32px ) 0.9em 1.5em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 200ms ease-in-out;

  &:hover,
  &:focus,
  &:active {
    background: #8c3c2a;
  }
}

Das ergibt einen einfachen, attraktiven, orangefarbenen Button, der im Hover-, Focus- und Active-Zustand zu einem dunkleren Orange wird. Er bietet sogar etwas Platz für die Icons, die wir hinzufügen möchten, also fügen wir sie jetzt mit Pseudoelementen hinzu

.button {

  /* everything from before, plus... */

  &::after {
    background: center / 24px 24px no-repeat; // Shorthand for: background-position, background-size, background-repeat
    border-radius: 100em;
    bottom: 0;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
  }

  &--download {

    &::after {
      background-image: url( 'data:image/svg+xml;utf-8,' );
      }
    }

  &--external {

    &::after {
      background-image: url( 'data:image/svg+xml;utf-8,' );
    }
  }

  &--caret-right {

    &::after {
      background-image: url( 'data:image/svg+xml;utf-8,' );
    }
  }
}

Lassen Sie uns hier innehalten. Während wir unser SCSS so übersichtlich wie möglich halten, indem wir die Eigenschaften deklarieren, die für *alle* Buttons gelten, und dann nur die Hintergrund-SVGs pro Klasse festlegen, sieht es bereits etwas unübersichtlich aus. Das ist der zweite Nachteil von SVGs, den ich zuvor erwähnt habe: die Notwendigkeit, großen, unschönen Markup-Code in unserem CSS zu verwenden.

Beachten Sie auch, dass wir unsere Füll- und Strichfarben innerhalb der SVGs definieren. Irgendwann entschieden Browser, dass die Raute ("#"), die wir alle kennen und lieben in unseren Hex-Farben, ein Sicherheitsrisiko darstellte, und erklärten, dass Data-URLs, die diese enthielten, nicht mehr unterstützt würden. Das lässt uns drei Optionen

1. Unsere Data-URLs von Markup (wie hier) in Base-64-kodierte Zeichenketten umwandeln, aber das macht sie noch *weniger* wartungsfreundlich als zuvor, indem sie komplett verschleiert werden; oder
2. rgba() oder hsla() Notation verwenden, nicht immer intuitiv, da viele Entwickler seit Jahren Hex verwenden; oder
3. Unsere Rauten in ihre URL-kodierten Entsprechungen, "%23", umwandeln.

Wir werden uns für Option Nummer drei entscheiden und diese Browserbeschränkung umgehen. (Ich werde hier jedoch erwähnen, dass diese Technik auch mit rgb(), hsla() oder jedem anderen gültigen Farbformat funktioniert, sogar CSS-benannten Farben. Aber bitte verwenden Sie CSS-benannte Farben nicht im Produktionscode.)

Umstieg auf Maps

Zu diesem Zeitpunkt haben wir nur drei Buttons vollständig deklariert. Aber ich mag sie nicht einfach so im Code versenkt haben. Wenn wir dieselben Icons woanders verwenden müssten, müssten wir den SVG-Markup kopieren und einfügen, oder wir könnten sie Variablen zuweisen (entweder Sass- oder CSS-Custom-Properties) und sie auf diese Weise wiederverwenden. Aber ich werde mich für das hinter Tür Nummer drei entscheiden und zu einer der größten Funktionen von Sass wechseln: Maps.

Wenn Sie mit Sass Maps nicht vertraut sind, sind sie im Wesentlichen die Sass-Version eines assoziativen Arrays. Anstelle eines numerisch indizierten Arrays von Elementen können wir einen Namen (einen Schlüssel, wenn Sie so wollen) zuweisen, damit wir sie anhand von etwas Logischem und leicht Merkwürdigem abrufen können. Also bauen wir eine Sass Map unserer drei Icons

$icons: (
  'download':    '',
  'external':    '',
  'caret-right': '',
);

Hier sind zwei Dinge zu beachten: Wir haben die Zeichenkette data:image/svg+xml;utf-8, nicht in eines dieser Icons aufgenommen, nur den SVG-Markup selbst. Diese Zeichenkette wird *jedes Mal* gleich sein, wenn wir diese Icons verwenden müssen, also warum uns wiederholen und das Risiko von Fehlern eingehen? Lassen Sie uns sie stattdessen als eigene Zeichenkette definieren und sie bei Bedarf dem Icon-Markup voranstellen

$data-svg-prefix: 'data:image/svg+xml;utf-8,';

Das andere zu Beachtende ist, dass wir unseren SVG nicht *wirklich* schöner machen; das geht nicht. Was wir tun, ist, all diese Hässlichkeit aus dem Code herauszuziehen, an dem wir täglich arbeiten, damit wir uns nicht so viel mit diesem visuellen Durcheinander auseinandersetzen müssen. Heck, wir könnten es sogar in eine eigene Teil-Datei auslagern, die wir nur anfassen müssen, wenn wir mehr Icons hinzufügen müssen. Aus den Augen, aus dem Sinn!

Lassen Sie uns nun unsere Map verwenden. Wenn wir zu unserem Button-Code zurückkehren, können wir diese Icon-Literale nun durch das Abrufen aus der Icon-Map ersetzen

&--download {

  &::after {
    background-image: url( $data-svg-prefix + map-get( $icons, 'download' ) );
  }
}

&--external {

  &::after {
    background-image: url( $data-svg-prefix + map-get( $icons, 'external' ) );
  }
}

&--next {

  &::after {
    background-image: url( $data-svg-prefix + map-get( $icons, 'caret-right' ) );
  }
}

Schon sieht das viel besser aus. Wir haben unsere Icons so abstrahiert, dass unser Code lesbar und wartungsfreundlich bleibt. Und wenn das die einzige Herausforderung wäre, wären wir fertig. Aber in dem realen Projekt, das diesen Artikel inspiriert hat, hatten wir ein weiteres Problem: unterschiedliche Farben.

Unsere Buttons sind einfarbig und werden im Hover-Zustand zu einer dunkleren Version dieser Farbe. Aber was ist, wenn wir stattdessen "Ghost"-Buttons wollen, die im Hover zu einfarbigen werden? In diesem Fall wären weiße Icons für Buttons, die auf weißen Hintergründen erscheinen, unsichtbar (und sehen auf nicht-weißen Hintergründen wahrscheinlich falsch aus). Was wir brauchen werden, sind *zwei* Variationen jedes Icons: die weiße für den Hover-Zustand und eine, die mit der Rahmen- und Textfarbe des Buttons für den Nicht-Hover-Zustand übereinstimmt.

Aktualisieren wir das Basis-CSS unseres Buttons, um ihn von einem Vollton-Button zu einem Ghost-Button zu machen, der im Hover Vollton wird. Und wir müssen auch die Pseudoelemente für unsere Icons anpassen, damit wir sie im Hover austauschen können.

.button {
  appearance: none;
  background: none;
  border: 3px solid #d95a2b;
  border-radius: 100em;
  color: #d95a2b;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  padding: 1em calc( 1.5em + 32px ) 0.9em 1.5em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: 200ms ease-in-out;
  transition-property: background-color, color;

  &:hover,
  &:focus,
  &:active {
    background: #d95a2b;
    color: #fff;
  }
}

Jetzt müssen wir unsere unterschiedlich gefärbten Icons erstellen. Eine *mögliche* Lösung ist, die Farbvariationen direkt in unsere Map aufzunehmen... irgendwie. Wir können entweder neue, unterschiedlich gefärbte Icons als zusätzliche Elemente in unserer eindimensionalen Map hinzufügen oder unsere Map zweidimensional machen.

Eindimensionale Map

$icons: (
  'download-white':  '',
  'download-orange': '',
);

Zweidimensionale Map

$icons: (
  'download': (
    'white':  '',
    'orange': '',
  ),
);

Beides ist problematisch. Allein durch das Hinzufügen einer zusätzlichen Farbe verdoppeln wir unseren Wartungsaufwand. Müssen Sie das vorhandene Download-Icon durch ein anderes ersetzen? Sie müssen jede Farbvariation manuell erstellen, um sie zur Map hinzuzufügen. Benötigen Sie eine dritte Farbe? Jetzt haben Sie Ihre Wartungskosten *verdreifacht*. Ich werde gar nicht erst auf den Code eingehen, um Werte aus einer mehrdimensionalen Sass-Map abzurufen, da dies unserem Endziel hier nicht dient. Stattdessen machen wir einfach weiter.

String-Ersetzung einführen

Abgesehen von Maps ist der Nutzen von Sass in diesem Artikel darin zu sehen, wie wir es nutzen können, um CSS wie eine Programmiersprache zu verhalten. Sass verfügt über integrierte Funktionen (wie map-get(), das wir bereits gesehen haben) und ermöglicht es uns, eigene zu schreiben.

Sass verfügt auch über eine Reihe von integrierten String-Funktionen, aber unerklärlicherweise ist eine String-Ersetzungsfunktion nicht dabei. Das ist schade, da ihre Nützlichkeit offensichtlich ist. Aber nicht alles ist verloren.

Kitty Giradel hat uns 2014 hier auf CSS-Tricks eine Sass-Version von str-replace() zur Verfügung gestellt. Wir können diese hier verwenden, um *eine* Version unserer Icons in unserer Sass-Map zu erstellen, indem wir einen Platzhalter für unsere Farbwerte verwenden. Fügen wir diese Funktion unserem eigenen Code hinzu

@function str-replace( $string, $search, $replace: '' ) {

  $index: str-index( $string, $search );

  @if $index {
    @return str-slice( $string, 1, $index - 1 ) + $replace + str-replace( str-slice( $string, $index + str-length( $search ) ), $search, $replace);
  }

  @return $string;
}

Als Nächstes aktualisieren wir unsere *ursprüngliche* Sass-Icon-Map (die mit nur den weißen Versionen unserer Icons), um das Weiß durch einen Platzhalter (%%COLOR%%) zu ersetzen, den wir nach Bedarf durch jede gewünschte Farbe ersetzen können.

$icons: (
  'download':    '',
  'external':    '',
  'caret-right': '',
);

Aber wenn wir versuchen würden, diese Icons nur mit unserer neuen str-replace()-Funktion und Sass' integrierter map-get()-Funktion abzurufen, würden wir am Ende etwas Großes und Hässliches haben. Ich ziehe es vor, diese beiden mit einer weiteren Funktion zu verbinden, die den Aufruf des gewünschten Icons in der gewünschten Farbe so einfach macht wie eine Funktion mit zwei Parametern (und weil ich besonders faul bin, machen wir die Farbe standardmäßig weiß, damit wir diesen Parameter weglassen können, wenn das die gewünschte Icon-Farbe ist).

Da wir ein Icon *abrufen*, ist es eine "Getter"-Funktion, und so nennen wir sie get-icon()

@function get-icon( $icon, $color: #fff ) {

  $icon:        map-get( $icons, $icon );
  $placeholder: '%%COLOR%%';

  $data-uri: str-replace( url( $data-svg-prefix + $icon ), $placeholder, $color );

  @return str-replace( $data-uri, '#', '%23' );
}

Erinnern Sie sich, wo wir sagten, dass Browser keine Data-URLs rendern, die Rauten enthalten? Ja, wir ersetzen auch das per str-replace(), damit wir nicht vergessen müssen, "%23" bei unseren Farb-Hex-Codes mitzuführen.

Seitennotiz: Ich habe auch eine Sass-Funktion zur Abstraktion von Farben, aber da dies außerhalb des Rahmens dieses Artikels liegt, verweise ich Sie auf meinen get-color() Gist, um ihn nach Belieben durchzusehen.

Das Ergebnis

Jetzt, da wir unsere get-icon()-Funktion haben, wollen wir sie nutzen. Wenn wir zu unserem Button-Code zurückkehren, können wir unsere map-get()-Funktion durch unseren neuen Icon-Getter ersetzen

&--download {

  &::before {
    background-image: get-icon( 'download', #d95a2b );
  }

  &::after {
    background-image: get-icon( 'download', #fff ); // The ", #fff" isn't strictly necessary, because white is already our default
  }
}

&--external {

  &::before {
    background-image: get-icon( 'external', #d95a2b );
  }

  &::after {
    background-image: get-icon( 'external' );
  }
}

&--next {

  &::before {
    background-image: get-icon( 'arrow-right', #d95a2b );
  }

  &::after {
    background-image: get-icon( 'arrow-right' );
  }
}

Viel einfacher, nicht wahr? Jetzt können wir jedes definierte Icon in jeder gewünschten Farbe aufrufen. Alles mit einfachem, sauberem, logischem Code.

• Wir müssen ein SVG nur einmal deklarieren.
• Wir haben eine Funktion, die dieses Icon in jeder beliebigen Farbe abruft.
• Alles ist auf eine logische Funktion abstrahiert, die genau das tut, was sie zu tun scheint: X-Icon in Y-Farbe abrufen.

Fehlersichere Gestaltung

Das Einzige, was uns fehlt, ist Fehlerprüfung. Ich bin ein *großer* Verfechter des lautlosen Fehlschlagens ... oder zumindest des Fehlschlagens auf eine Weise, die für den Benutzer unsichtbar ist, dem Entwickler aber klar sagt, was falsch ist und wie es behoben werden kann. (Aus diesem Grund *sollte* ich Unit-Tests viel mehr verwenden, als ich es tue, aber das ist ein Thema für einen anderen Tag.)

Eine Möglichkeit, wie wir bereits die Fehleranfälligkeit unserer Funktion reduziert haben, ist die Festlegung einer Standardfarbe (in diesem Fall Weiß). Wenn also der Entwickler, der get-icon() verwendet, vergisst, eine Farbe anzugeben, ist das kein Problem; das Icon wird weiß sein, und wenn das nicht das ist, was der Entwickler wollte, ist es offensichtlich und leicht zu beheben.

Aber Moment, was ist, wenn der zweite Parameter keine Farbe ist? Zum Beispiel, wenn der Entwickler eine Farbe falsch eingegeben hat, sodass sie vom Sass-Prozessor nicht mehr *als* Farbe erkannt wird?

Glücklicherweise können wir prüfen, welcher Wertetyp die Variable $color ist

@function get-icon( $icon, $color: #fff ) {

  @if 'color' != type-of( $color ) {

    @warn 'The requested color - "' + $color + '" - was not recognized as a Sass color value.';
    @return null;
  }

  $icon:        map-get( $icons, $icon );
  $placeholder: '%%COLOR%%';
  $data-uri:    str-replace( url( $data-svg-prefix + $icon ), $placeholder, $color );

  @return str-replace( $data-uri, '#', '%23' );
}

Wenn wir nun versuchen würden, einen unsinnigen Farbwert einzugeben

&--download {

  &::before {
    background-image: get-icon( 'download', ce-nest-pas-un-couleur );
  }
}

...erhalten wir eine Ausgabe, die unseren Fehler erklärt

Line 25 CSS: The requested color - "ce-nest-pas-un-couleur" - was not recognized as a Sass color value.

...und die Verarbeitung stoppt.

Aber was ist, wenn der Entwickler das Icon nicht deklariert? Oder wahrscheinlicher, ein Icon deklariert, das nicht in der Sass-Map vorhanden ist? Ein *Standard*-Icon zu liefern, macht in diesem Szenario keinen Sinn, weshalb das Icon sowieso ein obligatorischer Parameter ist. Aber um *sicher* zu sein, dass wir ein Icon aufrufen und es gültig ist, fügen wir eine weitere Prüfung hinzu

@function get-icon( $icon, $color: #fff ) {

  @if 'color' != type-of( $color ) {

    @warn 'The requested color - "' + $color + '" - was not recognized as a Sass color value.';
    @return null;
  }

  @if map-has-key( $icons, $icon ) {

    $icon:        map-get( $icons, $icon );
    $placeholder: '%%COLOR%%';
    $data-uri:    str-replace( url( $data-svg-prefix + $icon ), $placeholder, $color );

    @return str-replace( $data-uri, '#', '%23' );
  }

  @warn 'The requested icon - "' + $icon + '" - is not defined in the $icons map.';
  @return null;
}

Wir haben den Kern der Funktion in eine @if-Anweisung verpackt, die prüft, ob die Map den angegebenen Schlüssel hat. Wenn ja (was die Situation ist, auf die wir hoffen), wird die verarbeitete Data-URL zurückgegeben. Die Funktion stoppt genau dort — bei @return —, weshalb wir keine @else-Anweisung benötigen.

Aber wenn unser Icon *nicht* gefunden wird, wird null zurückgegeben, zusammen mit einer @warnung in der Konsolenausgabe, die die problematische Anfrage sowie den Teil-Dateinamen und die Zeilennummer identifiziert. Jetzt wissen wir *genau*, was falsch ist und wann und was behoben werden muss.

Wenn wir also versehentlich eingeben würden

&--download {

  &::before {
    background-image: get-icon( 'ce-nest-pas-une-icône', #d95a2b );
  }
}

...würden wir die Ausgabe in unserer Konsole sehen, wo unser Sass-Prozess beobachtete und lief

Line 32 CSS: The requested icon - "ce-nest-pas-une-icône" - is not defined in the $icons map.

Was den Button selbst betrifft, so ist der Bereich, in dem das Icon sein sollte, leer. Nicht so gut wie unser gewünschtes Icon dort, aber *sooo* viel besser als ein defektes Bild oder Ähnliches.

Fazit

Nach all dem werfen wir einen Blick auf unser finales, *verarbeitetes* CSS

.button {
  -webkit-appearance: none;
      -moz-appearance: none;
          appearance: none;
  background: none;
  border: 3px solid #d95a2b;
  border-radius: 100em;
  color: #d95a2b;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 1em calc( 1.5em + 32px ) 0.9em 1.5em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: 200ms ease-in-out;
  transition-property: background-color, color;
}
.button:hover, .button:active, .button:focus {
  background: #d95a2b;
  color: #fff;
}
.button::before, .button::after {
  background: center / 24px 24px no-repeat;
  border-radius: 100em;
  bottom: 0;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
}
.button::after {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.button:hover::after, .button:focus::after, .button:active::after {
  opacity: 1;
}
.button--download::before {
  background-image: url('data:image/svg+xml;utf-8,');
}
.button--download::after {
  background-image: url('data:image/svg+xml;utf-8,');
}
.button--external::before {
  background-image: url('data:image/svg+xml;utf-8,');
}
.button--external::after {
  background-image: url('data:image/svg+xml;utf-8,');
}
.button--next::before {
  background-image: url('data:image/svg+xml;utf-8,');
}
.button--next::after {
  background-image: url('data:image/svg+xml;utf-8,');
}

Yikes, immer noch hässlich, aber es ist eine Hässlichkeit, die zum Problem des Browsers wird, nicht zu unserem.

Ich habe all dies in CodePen zum Forken und Experimentieren zusammengefasst. Das Fernziel dieses Mini-Projekts ist die Erstellung eines PostCSS-Plugins, um all dies zu tun. Dies würde die Verfügbarkeit dieser Technik für *jeden* erhöhen, unabhängig davon, ob er einen CSS-Präprozessor verwendet oder nicht, oder *welchen* Präprozessor er verwendet.

„Wenn ich weiter gesehen habe, dann dadurch, dass ich auf den Schultern von Riesen stehe.“
– Isaac Newton, 1675

Natürlich können wir nicht über Sass und String-Ersetzung und (besonders) SVGs sprechen, ohne dankbar die Beiträge der anderen anzuerkennen, die diese Technik inspiriert haben.

• Str-replace Function von Kitty Giraudel
• Ein ziemlich gutes SVG-Icon-System von Chris Coyier
• Reale Anwendung von CSS mit SVG von Craig Buckler