Grunticon 2 ist da! Es gibt eine coole neue Website. Grunticon ist ein verdammt gutes Werkzeug zum Erstellen eines SVG-Icon-Systems. Der Workflow ist wie folgt:
- Habe einen Ordner voller SVG-Icons
- Führe Grunticon auf diesem Ordner aus, was alles produziert, was du brauchst
- Platziere das kleine Stück JavaScript im
<head> - Verwende HTML wie
<div class="icon-image"></div>, wo du Icons haben möchtest - Icons überall!
Grunticon 2 hat sogar eine Methode zum Einfügen von Inline-<svg>, damit du all diese Vorteile wie Skripting, Animation, CSS-Kontrolle usw. hast. Du fügst einfach ein Attribut hinzu
<div class="icon-burger alt" data-grunticon-embed></div>Du könntest Grunticon genau so verwenden, wie es ist. Es ist nur ein etwas anderer Ansatz als der, über den ich viel gesprochen habe, der einen SVG-Sprite und inline <svg><use></use></svg> verwendet.
So wie ich es zeige, beginnst du mit inline <svg> im Dokument, wo du die Icons haben möchtest, und kümmerst dich von dort aus um die Fallbacks. Die möglichen Vorteile sind:
- Wenn Inline-SVG unterstützt wird, findet überhaupt keine DOM-Manipulation statt, alles bleibt einfach liegen und funktioniert.
- Es ist etwas einfacher, das Fallback eines Tages zu entfernen, wenn du entscheidest, dass du es nicht mehr brauchst.
- (Danke an Scott für den Hinweis unten): Nicht-JS-Benutzer erhalten SVG-Icons anstelle von Fallback-PNGs, wenn du dich entscheidest, den Sprite nicht per Ajax zu laden, sondern ihn direkt in das Dokument einzubetten.
Das Coole an Inline-<svg>-First ist, dass wir Grunticon immer noch nutzen können, um uns bei den Fallbacks zu helfen!
1. Einen Ordner voller SVGs bekommen + SVG-Sprite erstellen
Du kannst sie auf jede erdenkliche Weise erhalten/erstellen, wie du SVG bekommen/erstellen kannst. Wir verwenden hier IcoMoon, weil es einfach und großartig ist und uns sofort den SVG-Sprite liefert. Wenn du die Sprite-Erstellung zu deinem Build-Prozess machen möchtest, lies dich ein.
2. Verwende die Icons wie gewohnt in deinem Dokument
Einfaches Beispiel
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-home">
<use xlink:href="#icon-home"></use>
</svg>
Go Home
</button>Stelle sicher, dass du xmlns="http://www.w3.org/2000/svg" darauf verwendest, was erforderlich ist, um ihnen in IE 8 Layout zu geben.
3. Verwende den normalen Grunticon-Build
Im Gruntfile.js
grunticon: {
icons: {
files: [{
expand: true,
cwd: "svg/",
src: ["*.svg"],
dest: "fallbacks/"
}]
// We don't need the enhanceSVG option here
}
}Dies erzeugt all die PNG-Fallback-Sachen für dich.
4. Im Kopf des Dokuments einen Inline-SVG-Test durchführen
Modernizr hat einen großartigen Inline-SVG-Test, den wir uns aneignen werden.
var supportsSvg = function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
};
if (!supportsSvg()) {
// Do Grunticon stuff
} else {
// Ajax for SVG sprite
}5. Wenn der Test Inline-SVG unterstützt, per Ajax den Sprite laden
Das haben wir schon mal behandelt
var ajax = new XMLHttpRequest();
ajax.open("GET", "svgdefs.svg", true);
ajax.responseType = "document";
ajax.onload = function(e) {
document.body.insertBefore(ajax.responseXML.documentElement,
document.body.childNodes[0]);
}
ajax.send();Das hat nichts mit Fallbacks zu tun, das ist einfach der normale Prozess des Abrufens der Icons in unterstützten Browsern. Wir tun das, damit es in IE 9/10/11 funktioniert und wir den Sprite browserseitig cachen können.
6. Wenn der Test Inline-SVG nicht unterstützt, Grunticon verwenden
Es ist nur geringfügig modifiziert, indem du die erste CSS-Datei im grunticon()-Aufruf löschst. Das ist die, bei der SVG unterstützt wird, und die haben wir bereits abgedeckt.
// Inline script of grunticon.load.js here
grunticon(["", "/fallbacks/icons.data.png.css", "/fallbacks/icons.fallback.css"]);Funktioniert anscheinend ziemlich gut
Wenn du auch IE 6 und 7 brauchst...
So wie es ist, verwenden wir das <svg>-Element selbst und setzen bei Bedarf einen Hintergrund dafür als Fallback. IE 8 kann das, aber IE 6 und 7 nicht. Das SVG-Element verschwindet einfach (selbst wenn du den HTML5Shiv verwendest, seltsamerweise).
Wenn du diese alten Browser unterstützen musst, verschiebe die Klassennamen stattdessen auf ein umschließendes div.
<div class="icon icon-credit">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
</div>
Ein weiteres bemerkenswertes IE 6-7-8-Problem: Du erhältst kein background-size, also generiere die PNGs in der exakten Größe, in der du sie verwenden wirst.
Repo
Ich habe das Konzept in einem Repo hochgeladen, falls ich etwas vermasselt habe und ihr es beheben wollt.
Man muss die Filament-Leute einfach lieben! Ich hoffe, Filament Group teilt auch etwas Liebe mit der Gulp-Community. Es wäre fantastisch, das zu meinem gulpfile hinzuzufügen.
Juhu!
Danke, Tim. Wir haben einen Plan in Arbeit, die letzten Grunt-Abhängigkeiten darin zu entkoppeln und sie für diejenigen, die es bevorzugen, Gulp-fähig zu machen. Wir werden lautstark darauf aufmerksam machen, wenn es soweit ist :)
Scott, du bist der Beste! Picturefill und Grunticon sind unglaublich wichtig für meinen Workflow. Große Anerkennung.
Toller Artikel und tolles Werkzeug!
Danke für den Artikel über deinen Ansatz, Chris. Ich bin froh, dass Grunticon hilfreich war, um die Fallbacks für den Workflow zu generieren, den du am angenehmsten findest. Ich denke, das fügt dem typischen Grunticon-Workflow ein paar Schritte hinzu, aber wenn du Use/Defs gegenüber dem rohen SVG-Markup bevorzugst, ist es sicherlich eine gute Möglichkeit, das Werkzeug für dich arbeiten zu lassen. Außerdem ist es ein netter kleiner Bonus, dass ein Nicht-JS-Benutzer SVG anstelle eines Fallback-PNGs erhält. Cheers :)
In der aktuellen Version1 hängt das SVG-Dokument von AJAX ab, damit es in die Seite geladen wird. Daher erhalten Nicht-JS-Benutzer keine Icons.
Aus dem Artikel
Um Nicht-JS-Benutzer zu unterstützen, muss das SVG-Element meiner Meinung nach inline mit der Seite geladen werden. Ich hatte noch nicht die Gelegenheit, SVG-Elemente in vollem Umfang zu nutzen, und selbst die niedrigeren Ebenen kaum. Daher solltest du diese Aussage mit Vorsicht genießen.
GitHub Repo Version zum Zeitpunkt dieses Posts ↩
Danke Chris, Scott und der Filament Group! Großartig, etwas Neues zu sehen, das auch ältere Browser gut genug abdeckt, um es sofort produktiv einsetzen zu können.
Filament Group regiert, ich habe so viel vom ihnen über das "richtige" Vorgehen gelernt
Was ist der Vorteil dieser Methode gegenüber z.B. IcoMoon für SVG-Sprites und PNG-Fallbacks mit svg4everybody für alte IE/Android?
Das ist cool http://www.grumpicon.com/
Ja, das Non-JS funktioniert nicht, da es nach dem Inline-SVG xlink:href="\#icon-pencil" sucht. Müsste es nicht etwas wie xlink:href="svgdefs.svg\#icon-pencil" sein? Aber das würde dann den Caching-Effekt untergraben.