14: SVG Icon System - Vytváření chyb - Triky CSS

Anonim

Prvkem je spojka k celé této myšlence inline ikony SVG systému. Zjistili jsme, že čistým způsobem, jak to udělat, je dát vše, co chcete později nakreslit, do bloku, aby se nevykreslil, a můžeme na ně později odkazovat (řekněte jim, aby tuto ikonu nakreslili).

V tomto videu budeme trávit nějaký čas ručním stavěním vlastního bloku. Není to nijak zvlášť obtížné a myslím, že to vede domů, jak to všechno funguje.

Vyrobíme to z SVG, které najdeme na různých místech webu. Chytáme jeden z The Noun Project, jeden z IcoMoon a jeden z Shutterstocku. Provádíme náležitou péči při otevírání SVG, opravujeme nějaké podivné tvary, přitahujeme velikost plátna a kdoví co ještě. Není zde žádné omezení, odkud mohou tyto vektorové informace pocházet. Tyto tři zdroje vám mají ukázat, že SVG může pocházet odkudkoli z vektoru.

Později tento proces snad zjednodušíme, ale pochopení podstaty jeho fungování je vždy užitečné. Nikdy nevíte, kdy budete muset hlouběji kopat (např. Zjistit, proč něco nefunguje správně).