Příklad načítání přes view. (zde jsou v příkladu inline styly, můžeme ale použít odkukoliv.)
Příklad s již definovanými barvami (bere z svg - název původní ikony je alert.svg)
<div style="width: 100px; height: 100px; background: url('/assets/front/sprite.svg#alert-view') no-repeat 0/cover;"></div>
Příklad s použití masky (svg se chová pouze jako maska, můžeme přebarvovat přes pozadí libovolně)
<div style="width: 100px; height: 100px; background: blue; mask-image: url('/assets/front/sprite.svg#alert-view'); mask-size: cover"></div>
Popřípadě můžeme nahrát do složky (není ale nutné)
Další obrázky
Pokud jde tak obrázek uložit v jpg (png jen v případě nutnosti průhlednosti, ikonky vždy v svg)
Adobe XD - export ikonek
- Označíme všechny části ikonky a hodíme do groupy pomocí CTRL + G
- V levém sloupci vybereme vrstvy a klikneme na danou ikonku
- Změníme pojmenování ikonky
- Označíme všechny ikonky a vlevo nahoře přes File -> Export -> Export selected si hromadně uložíme do nějaké složky.
- Nahrajeme na icomoon.io a přes pravou nabídku u ikon odebereme barvu (těm co chceme přebarvovat na projektu) (properties -> remove all colors)
- Ve spodní nabídce dáme generate svg a poté se nám stáhne složka, ve které nás zajímá pouze složka SVG - ikonky z ní vezmeme a dohodíme do složky resources/svg-sprite odkud se automaticky kompilují.
- V html použijeme tímto stylem (pokud jsme odbarvili přes icomoon, bude nám fungovat fill vlastnost - můžeme použít v sass souboru, nemusí být takto inline)
<svg style="fill: pink;">
<use href="/assets/front/sprite.svg#nazev_ikony"></use>
</svg>Definování obrázků a jejich velikostí
V superadministraci je nastaveno několik typů obrázků a jejich velikostí. Zatím se fotka zmenší na daný rozměr, ale zůstane zachováno aspect-ratio - poměr stran
Je tedy potřeba obrázky většinou dát do nějakého figure - například section__figure - tomu definovat rozměry - výška a šířka a potom daný obrázek nastavit, aby tento figure vyplnil (choval se pouze jako pozadí) - například width: 100%, height: 100%, object-fit:cover. Tím se zachová stejný rozměr, ikdyž se nahraje fotka v jiném poměru stran. Zároveň je potřeba daný figure pozmenšovat na menších zařízeních, aby přibližně odpovídal poměr stran a z obrázku se nestala úzká a vysoká nudle na mobilu. Na mobilních zařízeních, kde se obsah většinou stahuje při každém zmenšení displaje, je možnost použít relativní výšku pomocí jednotky vw - viewport width, která nastaví výšku obrázku podle šířky displaye - například height: 30vw a obrázek se bude stále scalovat a zachovávat poměr stran.