- WordPress' neues Standardthema TwentySeventeen verwendet ein SVG-Iconsystem. Es wurde von Sami Keijonen beigesteuert, der einiges an Vorerfahrung damit hatte und hier ein wenig darüber geschrieben hat. Das Thema enthält Funktionen, die korrekten/zugänglichen Markup dafür ausgeben.
- Webpack hat jetzt einen SVG-Sprite-Loader, mit dem Sie
import myGreatIcon from './my-great-icon.svg';wie bei anderen Ressourcen in Webpack importieren können. - Beide genannten Projekte weisen auf das Fehlen der Fähigkeit von IE/Edge hin, von einem Dateipfad aus zu
<use>n, und empfehlen daher svgxuse bzw. svg4everybody. - Ich habe noch niemanden gesehen, der über ein SVG-Iconsystem spricht und sagt: Scheiß drauf, wir laufen mit HTTP/2, wir gehen einfach mit
<img src="icon-x.svg" alt="">. Ich habe auch noch nie ein SVG-Iconsystem gesehen, das Fragment-Identifikatoren verwendet (Safari und Android sind hier problematisch, daher ist das nicht allzu überraschend).
Ein paar SVG-Icon Links
Chris Coyier am
DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Danke für den Link zu unserem Webpack-Loader, Chris! Edge unterstützt
<use>mit einem externen Pfad tatsächlich in Version 13, sodass die Polyfills hoffentlich nicht mehr lange benötigt werden. Nichtsdestotrotz muss ich mir svgxuse ansehen. Ihr Readme behauptet, sie würden keine Art von Polling durchführen, daher bin ich neugierig, wie sie auf eine durch JavaScript geänderte Ikone reagieren würden.Bezüglich Jeremy's Kommentar oben hatte ich nach dem Lesen dieses Artikels einen kleinen Schock, da ich
<use>-Tags für SVG in meinem Portfolio-Website verwende. Ich habe gerade auf Edge 13/14 nachgesehen und alles ist in Ordnung. Ich muss mir auch svgxuse ansehen. Danke für den tollen Artikel!Wie ein Typ namens Chris Coyer in einem seiner Bücher sagte… Ich lade meinen SVG-Sprite per AJAX auf jeder Seite der Website, damit ich sie in Edge mit
<use>ohne svgxuse oder svg4everybody verwenden kann. So wird der Sprite vom Browser gecached. Großartig!