Стайлус и переменные

Пробрасываем переменные в фоновую SVG-иконку #

Я замутил самому себе конкурс «вечерняя тасочка», чтобы как-то оправдывать своё безделье. Вот тут подробнее.

Тасочка этого вечера: научился в стайлусе пробрасывать переменные в строковые переменные, содержащие URL-encoded SVG. Без написания плагинов к стайлусу, только миксинами и встроенными методами.

Теперь удобно храню SVG в стилях и не нуждаюсь в дублировании в исходниках (для обычного и наведённого состояний иконок).

Применимо только для мелких иконок, которые дешевле заинлайнить, чем подключать отдельно! И то в редких случаях. Обычно удобнее использовать спрайт из svg-символов, а при наведении нужные свойства менять через css. Это надёжнее и поддерживает плавность.

Иногда хочется не обращаться к файловой системе, потому решил найти способ инлайнить с передачей цветовой палитры проекта.

Этой фигнёй я занимаюсь в рамках конкурса для себя самого, который я назвал «вечерняя тасочка». Посты этой категории буду тегировать #evening_task

See the Pen Smooth change color of SVG filling with Stylus SVG inline url-encoded icon by Andrew Gurylev (@fogrew) on CodePen.