Система от икони със SVG спрайтове, уеб дизайн

Винаги съм бил стикер за шрифтове с икони. Много сайтове наистина се нуждаят от система за подреждане на икони и шрифтовете на икони предлагат чудесна възможност за това.

И дори ако вградените SVG и елементи на връзки работят добре в IE 9 и по-нови версии, използването на икони остава по-прогресивна практика.

Първо, нека да разгледаме как работи.

За да работите с икони, можете да създадете папка с .svg файлове:

Това е едно от най-страхотните неща за SVG - те самите са изходните файлове.

SVG файловете могат да бъдат цветни, черно-бели, различни форми, размери, независимо от това:

Можете да използвате Illustrator (или друга програма), за да ги запазите както искате с всички придружаващи елементи:

Създайте .svg файл

Можете да го направите ръчно, ако искате. Точно това направих. Дори не е нужно да преглеждате окончателния файл. Просто го наречете svg-defs.svg или нещо подобно.

Този файл трябва да има само таг с таг (което просто означава, че дефинирате елементи за по-нататъшна употреба) и след това куп тагове (група).

Всеки маркер ще има уникален идентификатор и ще включва пълния път до файла, както и ще съдържа много повече допълнителни данни за всяка икона:

Отново можете да направите това ръчно, но това разбира се е малко трудоемък процес. Fabrice Weinberg създаде приставка grunt-svgstore, която автоматизира тази процедура.

С тази команда можете да инсталирате Grunt:

Проверете дали всички задачи са налични в него:

И след това задайте конфигурацията:

В изходния файл svg-defs.svg всяка икона (независимо от пътя и другите атрибути на SVG файла) е затворена в таг с уникален идентификатор, включително префикса и името на файла (без разширението .svg).

Свържете SVG в горната част на документа

Файлът .SVG е свързан, както следва:

Или по някакъв друг начин по ваша преценка.

Кодът трябва да бъде поставен отгоре. За съжаление има една грешка в Chrome, която ще попречи на това да работи. Ще се справим с това по-късно.

Използвайте икони навсякъде

Сега можете да използвате икони, където искате (!):

Уверете се, че използвате подходящите имена на класове SVG за оразмеряване:

Ура: можете да ги оформите (и стиловете на техните части) с CSS

Една от причините много да харесвам шрифтовете на иконите е, че можете да ги оформите с CSS.

Тази техника на едно гише, която ни позволява да правим всичко необходимо и още:

1. Можем да стилизираме отделни части;
2. SVG има много повече елементи, с които можете да манипулирате, като персонализирани филтри и четки.

Друг начин: IcoMoon

IcoMoon, който е известен като инструмент за създаване на шрифтове на икони, всъщност също предоставя фантастични възможности за създаване на SVG спрайтове. .

---