Shariff ohne Fontawesome

Body

Es nervt total, das überall exzessiv Webfonts pflicht oder schon hardcoded sind. Es wird immer mehr geladen and Zeugs. Wer sich für den Lighthouse/Pagespeed interessiert wird das auch schnell merken. Shariff nutzt von haus aus Fontawesome. Ich will aber mein iconset von icomoo nutzen!

Dazu müssen wir mal wieder ein sccript hacken/forken. Folgender Artikel beschreibt das gut. Nachteil, wir können nichtmehr einfach so updaten!

 

Notizen

npm install

änderungen, dann

npm run-script build

 

Änderungen für mein Icomoon Paket

Beispiel für external svg

<svg class="icon-blogger-brands"><use xlink:href="symbol-defs.svg#icon-blogger-brands"></use></svg><span class="name"> icon-blogger-brands</span>

Info xlink veraltet, href reicht siehe: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

Zeile ändern ca. 214, ich habe das bestehende kommentiert und meinen kram hinzugefügt:

//services i use, customize if needed
      //fa-plus
      //fa-facebook-f
      //fa-twitter
      //fa-pinterest-p
      //fa-stumbleupon
      //fa-whatsapp
      //fa-info

      const class_map = [];
      class_map['fa-plus'] = 'icon-plus-solid';
      class_map['fa-facebook-f'] = 'icon-facebook-f-brands';
      class_map['fa-twitter'] = 'icon-twitter-brands';
      class_map['fa-pinterest-p'] = 'icon-pinterest-p-brands';
      class_map['fa-stumbleupon'] = 'icon-stumbleupon-brands';
      class_map['fa-whatsapp'] = 'icon-whatsapp-brands';
      class_map['fa-info'] = 'icon-info-solid';

      //if (typeof service.faPrefix !== 'undefined' && typeof service.faName !== 'undefined') {
        //$shareLink.prepend($('<span/>').addClass(`${service.faPrefix} ${service.faName}`))
        //$shareLink.prepend($('<svg class="icon-blogger-brands"><use href="/sites/all/libs/icomoon/symbol-defs.svg#icon-blogger-brands"></use></svg>'))
        $shareLink.prepend($('<svg class="' + class_map[service.faName] + '"><use href="/sites/all/libs/icomoon/symbol-defs.svg#' + class_map[service.faName] + '"></use></svg>'))
      //}

Ich habe die prüfung "service.faName" und "service.faPrefix" entfernt, so müssen wir nichts weiteres anpassen. SOllte die console Fehler werfen baue ich eine Prüfung ein.
Das obige passt nur auf die von mir genutzen Services, siehe Kommentare.

 

Quelle

https://www.hagen-bauer.de/2015/07/heise-sharrif-anpassen.html

Tue, 08/09/2020 - 14:24