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

Instalace trvá pár minut. Tohle byste měli vidět pokud se všechno úspěšně nainstalovalo.
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

Struktura námi vytvořené složky
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

Proběhne komprese obrázků a sloučení svg souborů.
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