Vložení ikonek na web pomoci gruntu a svgstore

V minulém článku jsme si ukázali jakými způsoby můžeme vkládat ikonky na web. V tomto článku si ukážeme konkrétní řešení SvgStore.

Používám Grunt task runner a nejdříve si nainstalujeme potřebné knihovny s kterými budeme pracovat.

Poznámka: tento článek ukazuje velmi zjednodušený příklad použití ikonek. Pravděpodobně budete muset kód přizpůsobit vašemu vývojovému prostředí aby vyhovoval vašim potřebám.

Video

Všechno názorně ukazuji ve videu. Pokud preferujete čtení, pak video přeskočte.

Instalace

Nejdříve si vytvořte prázdnou složku. Následně otevřete terminal pro OSX uživatele nebo CMD pro windows uživatele a vepište následující:

		cd cesta/do/vase/nove/vytvorene/slozky
npm i grunt grunt-contrib-imagemin sync grunt-svgstore
	

Právě jsme si nainstalovali:

• grunt – task runner s kterým pracujeme
• grunt-contrib-imagemin – optimalizace svg kódu
• svgstore – spoji všechny ikonky do jednoho svg souboru

Struktura složky

Následně si vytvoříme strukturu projektu následovně:

		- kořenová složka (root)
	├── gruntfile.js
	└── dev
		├── index.html
		└── icons
			└── svg ikonky
	

Vložíme ikonky

Do adresáře dev/icons nahrajte jakékoliv svg soubory, které chcete umístit do svg spritu (sloučených ikonek).

Obsah gruntfile.js souboru

Do souboru gruntfile.js vložíme následující kód:

		"use strict";

module.exports = function(grunt) {
  var icons = "dev/icons/";
  var svgstore = "dev/";

  grunt.initConfig({
    // komprese obrazku
    imagemin: {
      icons: {
        options: {
          use: [
            require("imagemin-svgo")({
              plugins: [
                {
				  //ponech viewbox atribut
                  removeViewBox: false
                },
                {
				  //odstranit fill="none"
                  removeUselessStrokeAndFill: {
                    removeNone: true
                  }
                },
                {
				  //odstrani všechny atributy fill a stroke
                  removeAttrs: {
                    attrs: "(stroke.*|fill.*)"
                  }
                }
              ]
            })
          ]
        },
        files: [
          {
            expand: true,
            cwd: icons,
            src: ["**/*.svg"],
            dest: icons
          }
        ]
      }
    },

    //sloučení všech ikonek do icons.svg
    svgstore: {
      options: {
        cleanup: ["fill", "stroke"],
        includedemo: true
      },
      all: {
        files: {
          [svgstore + "icons.svg"]: [icons + "*.svg"]
        }
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-imagemin");
  grunt.loadNpmTasks("grunt-svgstore");

  grunt.registerTask("default", ["imagemin:icons", "svgstore"]);
};

	

Tím jsme si nastavili naše vývojové prostředí.

Provedeme konverzi

Nyní už můžeme připravené ikonky sloučit. Do příkazového řádku (CMD nebo terminalu) vepište:

		grunt
	

Výsledek

Měli byste nyní mít 2 nové soubory:

• icons-demo.html – soubor, ve kterém jsou všechny ikonky. Slouží pro demonstrativní účely
• icons.svg – svg soubor obsahující naše ikonky, který jsme potřebovali vytvořit

Způsob použití

Následujícím způsobem jednotlivé ikonky vkládáme na web:

		<svg>
  <use xlink:href="icons.svg#nazev-svg-souboru" />
</svg>
	

Shrnutí

Myslím, že tento způsob vkládání ikonek je sakra skvělý. Ikonky jsou stahovány jako obrázek, neblokují vykreslení stránky a umožňuji prohlížeči je kešovat. Zápis je přehledný a jednoduchý.

Podpora

svgstore nepodporuje IE 9,10,11. Ale řešení je naštěstí velmi jednoduché, stačí použit polyfill svg4everybody, který veškerou podporu vyřeší za vás.

Pár rad na závěr

• jsou to jen ikonky a je důležité vygenerovaný soubor zachovat malý. Ideální velikost je do 10kb.
• před automatickou konverzi ikonek doporučuji každou ikonku otevřít v Adobe Ilustrátoru a pročistit ji. Mnohdy svg je exportován špatně. Špatné svg generuji například: sketch, avocode.
• doporučuji ikonky mít vždy s webem společně. Pokud by vás napadlo ikonky umístit na CDN, budete řešit CORS
• na ikonky v css nastavte vlastnost fill=“currentColor“, díky čemuž ikonky se budou obarvovat do barvy písma potomka (autmatický převezme i hover)

Používáte svgstore nebo máte lepší řešení? Napište do komentářů vaše zkušenosti