Замени генерацию символьного спрайта на стек

[firefoxic]

Зачем? Чтобы не ограничиваться только вставкой в разметку svg>use, а иметь возможность свободно использовать иконки из стилей (преимущественно).

Обоснования:

• Моя заметка про стек
• Статья Вадима
• Его рассказ про свою статью
• Сравнение результатов работы разных видов спрайта
• Демонстрация возможностей стека
• Рабочий пример студенческого проекта со стеком вместо символов

[firefoxic]

Для справки

До недавнего времени я использовал для стека плагин gulp-svg-sprite, но этот монстр слишком огромный (😱 под 10МБ, EМНИП), и имеет свои странности, которые приходилось обходить хаками.

Предлагаемый gulp-stacksvg — мой форк заменяемого gulp-svgstore (потому что он лёгкий, и потому что автор сказал, что лучше форкнуть, чем пулреквестить это всё).

Кроме переписания с символов на стек попутно ещё и пофиксил несколько багов, убрал единственную и ненужную опцию и добавил три полезные опции. В том числе имя выходного файла: дефолт stack.svg, но можно без gulp-rename, поменять на любое другое.

Но важнее другая опция — склеивание (по дефолту символом _) путей до вложенных в подпапки иконок, то есть теперь студенты могут удобно группировать иконки не боясь повторений айдишников в ~спрайте~ стеке.

Так же плагин конвертирует width и height во viewBox, если того нет в файле иконки. Если же есть и размеры и viewBox — просто удаляет размеры. Особенно это актуально после работы svgo с дефолтным конфигом, в котором почему-то наоборот viewBox заменяется на размеры (есть ишья на исправление этого явно ошибочного дефолта, но ждать фикса видимо ещё долго).

[nikolai-shabalin]

@firefoxic , спасибо за столь подробное описание. Но это всё требует глубокого погружения. Прямо сейчас я этим заниматься не буду.

Для ускорения внедрения подскажи. Этот пакет меняет работу студента? Если студент будет работать как мы обучаем на курсе он почувствует сложности? Или этот пакет расширяет возможность использования спрайтов. Условно если студент захочет svg>use он сможет?

[firefoxic]

Этот пакет меняет работу студента?

Только избавляет от оков (кроме далее описанных преимуществ например ещё и даёт возможность иконки в подпапки объединять, что неудобно с gulp-svgstore, может возникнуть конфликт айдишников).

Если студент будет работать как мы обучаем на курсе он почувствует сложности?

Скорее упрощения. Даже если вручную собирать — это проще, в стеке даже теги svg на symbol менять не нужно. Только небольшой общий стиль добавить, ну и айдишники, без них никак. Так же плагин после svgo, который вьюбокс на размеры заменяет (что плохо), обратно меняет всё на вьюбокс (что правильно). То есть студенту об этом в настройках никак не надо заботиться и поведение иконок более ожидаемое будет.

Или этот пакет расширяет возможность использования спрайтов?

Да, расширяет. Стек можно использовать любым способом вставки изображения.

Условно если студент захочет svg>use он сможет?

Да, легко (см. ответ на предыдущий вопрос). Но лучше бы конечно отучать их от такого способа :)

[firefoxic]

Ещё одно отличие — на выходе спрайт называется stack.svg, что можно поменять, но я бы не стал, потому что специально сделал отличное от обычного имя файла, чтобы явно различить его от прочих sprite.svg, собранных из символов.

[nikolai-shabalin]

Отучать-то нужно, но это нужно править программу обучения и это явно не gulp-таска должна решать. Прямо сейчас все равно уже не успеется поменять программу. Поэтому таска не должна менять нвнешнюю работу студента.

Сейчас можно PR принять и в будущих потоках внедрить новую работу с спрайтами.

[firefoxic]

Это конечно не сразу. По началу можно просто сказать на ретро, что вот у вас сборка обновлённая и чуть поумнее, собирает спрайт так, что не обязательно use юзать, можно легко из стилей. И для желающих вникнуть (что не должно быть обязательным), можно давать мою статью-заметку про стек.

[nikolai-shabalin]

Да, я ещё углублюсь, но явно позже. Инфу добавлю в программу. Пока было важно, чтобы то, что есть не сломалось