Erfahrungen mit iconify SVG Framework
Hallo,
hat jemand schon Erfahrungen mit diesem Framework gemacht - iconify SVG framework ?
So wie ich es verstanden habe arbeitet es fürs Frontend ähnlich wie das aktuelle fontAwesome.
Man deklariert entsprechende Elemente und via script wird dann der entsprechende svg code inline platziert.
Allerdings ist dieses Projekt kostenfrei und vereint eine Fülle von icon libraries:
"Material Design Icons", "Google Material Icons", "FontAwesome5", "Foundation" "IconMonn Free" und mehr - siehe https://iconify.design/icon-sets/.
Eigene, individuelle svg's können ebenfalls herangezogen werden.
Hierbei werden die icons jedoch nicht vorgehalten sondern nur die auf einer Seite benötigten svg's über ein CDN-Network individuell angefordert.
Über CSS-KLassen bzw. Data-Attribute können zudem Farbe und Dimension für jedes icon deklariert und so angefordert werden.
Wer auf die externen CDN Aufrufe verzichten möchte kann entweder über das eigene Hosting die API ( gibt es als PHP und Node Version ) bereitstellen,
oder nur die tatsächlich benötigte icons selber bundeln ( in einer .js Datei ) - https://iconify.design/docs/icon-bundles/
Für letzteres wird ein Node Modul zur Verfügung gestellt: https://github.com/iconify/tools
Darüber bin ich erst auf dieses Framework gestoßen.
Wer eh sein lokales Workflow mit Node umsetzt ( z.B. für die SVG Optimierumng via SVGO ), findet dieses Tool evtl. hilfreich ( unabhängig von der iconify Nutzung ).
Es bietet u.a. die Möglichkeit bel. svg's aus einem Ordner zu lesen, zu bearbeiten und wieder zu exportieren/schreiben (asynchron).
Zusammen mit https://github.com/tigt/mini-svg-data-uri und https://github.com/mde/ejs könnte man sich beispielsweise ein Node Modul zusammenstellen,
das icons aus einem Ordner liest, den svg Code optimiert, als Data-URI codiert ( nicht Base64 - siehe https://css-tricks.com/probably-dont-base64-svg/ )
und dann als css/scss Datei speichert - evtl. auch gleich mit einer statischen Icon-Vorschau/Demo Seite.
Als fertige Module hierzu habe ich nur https://github.com/okize/iconr gefunden. Oder für svg sprites dann https://github.com/jkphl/svg-sprite.
Allerdings benötigen beide phantom.js und refenzieren dies auch in der package.json - was bei mir unter Windows ohne weiteres so nicht funktioniert.
Das iconify Tool benötigt zwar ebenfalls phantom.js, allerdings nur fürs Cropping s.: https://github.com/iconify/tools#cropping-images.
Die phantom.js Installation wird dann vorrausgesetzt aber halt nicht explizit in der package.json referenziert.
Wer die Cropping Funktion nicht nutzt braucht dann halt auch keine phantom.js Installation.
Wer ähnliche, weitere node/npm Module kennt (speziell fürs schreiben von CSS mit svg als Data-Uri)
- immer her damit ...
