css

Красим иконки в свои цвета

У Тильды, большая коллекция бесплатных иконок. К сожалению они все одного цвета и черно-белый не всегда вписывается в дизайн проекта. Выхода отсюда два - скачать иконку и покрасить ее в редакторе, а потом снова загрузить или попробовать покрасить ее специальным кодом. Что и попробуем сделать.

Единорог

Покрасим все иконки на странице

Возьмем все картинки, которые SVG и заменим их на DIV со специальным стилем - маской и вуаля - все иконки красные

<script type="text/javascript">
$(document).ready(function(){
  var iconStrokeColor = '#FF0000'; /* цвет иконок */
  $('img').each(function(){
    var w,h, src;
    if ($(this).attr('src').indexOf('.svg')!=-1) {
      src = $(this).attr('src');
      w = $(this).width();
      h = $(this).height();
      $(this).after('<div style="width: '+w+'px; height: '+h+'px;display: inline-block;background: '+iconStrokeColor+';-webkit-mask-image: url('+src+');mask-image:url('+src+');"></div>');
      $(this).remove();
    }
  })
});
</script>

Как это работает

Проходим по всем картинкам

Если это SVG, то заменяем тег IMG на DIV

У DIV прописываем стиль Mask и ставим цвет фона в нужный цвет