Der Begriff „Build Tool“ mag beängstigend klingen. Er lässt an ausgefallene Kommandozeilentools denken, die Konfigurationen und seltsame Systemabhängigkeiten erfordern, die kaputtgehen, wenn man sie schief ansieht. Manchmal sind Build Tools so, und das werden wir in dieser Reihe behandeln. Aber im Grunde ist ein Build Tool nur etwas, das Ihren Prozess erleichtert. Etwas automatisieren, das Sie zuvor von Hand gemacht haben.
IcoMoon ist in diesem Sinne ein Build Tool. Es war (und ist) ein beliebtes Werkzeug zum Erstellen benutzerdefinierter Icon-Schriftarten. Dafür ist es wunderbar. Ich unterstütze jedes Werkzeug, das Frontend-Entwickler ermutigt, angepasste, optimierte Assets nur für ihre Bedürfnisse zu erstellen, anstatt den ganzen Kram (jedes Icon der Welt) einzubinden und nur Teile davon zu verwenden. IcoMoon ist jedoch nicht nur für @font-face Icon-Schriftarten gedacht, es kann auch SVG-Defs-Blöcke ausgeben, die es als SVG-Sprite bezeichnet (ebenfalls ein vollkommen akzeptabler Begriff).
Grundsätzlich klicken Sie sich durch die gewünschten Icons und exportieren sie dann, und Sie erhalten einen perfekten SVG-Defs-Block zur Verwendung. Beachten Sie, dass sie noch keine <symbol> verwenden, und ich bin mir nicht sicher, warum. Das bedeutet, dass Sie viewBox und Barrierefreiheitsfunktionen selbst einbeziehen müssen, wenn Sie sie implementieren. Melden Sie sich dort für ein Konto an, und Sie können das Projekt speichern, was bedeutet, dass Sie zurückkehren und nach Bedarf Dinge entfernen/hinzufügen können, anstatt von vorne zu beginnen. Das macht es wirklich zu einem Build Tool.
Wichtig zu wissen über IcoMoon: Sie können Ihr eigenes SVG hinzufügen. Sie sind nicht auf das beschränkt, was Sie in der Standard-App sehen. Sie können SVG von anderswo beziehen und es einfach hinzufügen, und es wird mit Ihrem Projekt gespeichert. Sie könnten IcoMoon als Build Tool nur mit Ihrem eigenen benutzerdefinierten SVG verwenden, und es wäre trotzdem nützlich.
icomoon verwendet jetzt symbol – sie müssen zugehört haben :)