Cyberhus SVG icons

by Michael Lajlev

HTML

<script src="https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700,700italic,900,900italic"></script>
<div class="icons">
  <h2>SVG icons</h2>
  <input class="input--range" type="range" name="size" min="16" max="128" value="32">

  <div class="icon">
    <h5>Blog</h5>
    <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
      <g fill-rule="evenodd" transform="translate(0 10)" fill="none">
        <path d="m88.71 1.931c-3.668-1.297-7.456-2.02-11.364-1.922-3.117.072-5.85 1.01-8.223 2.811v9.85l-.096 79.79c1.271-1.01 2.685-1.778 4.315-2.234 2.805-.817 5.682-.937 8.583-.745 3.596.24 6.953 1.393 10.285 2.643 3.644 1.393 7.288 2.859 11.172 3.556 5.37.961 10.812 1.297 16.255 1.297h1.846l-.863-90.5c-15.224-1.033-14.169 2.114-31.91-4.541"
        />
        <path d="m1.641 9.647h3.524v1.177 87.38c0 1.417-.12 1.177 1.271 1.225 5.706.12 11.364-.072 17.05-.625 5.658-.553 11.03-2.02 16.255-4.204 4.052-1.706 8.271-2.763 12.73-2.643 1.271.024 2.565.216 3.812.553 3.093.889 4.579 3.243 5.346 6.126.048.216.096.432.168.649.024.048.048.096.096.24 1.367 0 2.757.024 4.148-.024.144 0 .312-.216.456-.36.048-.048.024-.168.048-.24.887-4.949 4.651-6.823 8.679-6.967 4.603-.168 8.966.769 13.14 2.619 6.07 2.715 12.467 4.108 19.11 4.421 4.939.24 9.925.168 14.864.24.168 0 .312-.024.599-.048v-1.153c-.024-23.905-.024-47.81-.096-71.74-.024-2.931 1.343-4.925 3.812-6.487v83.75h-124.98c-.024-31.33-.024-62.56-.024-93.89"
        />
        <path d="m30.639 25.918l6.584-4.373 6.098 4.325c0 0-.172-14.367-.2-21.05-4.094 1.273-8.302 2.162-12.596 2.691-.029 16.313.115 18.403.115 18.403" />
        <path d="m58.737.502c-4.459-.889-8.823-.577-13.02.769l.144 36.04-11.652-9.61-12.874 9.538.072-30.2c-3.045.072-6.089.072-9.11.12h-1.031v89.81c.336 0 .647.024.935 0 3.045-.12 6.113-.168 9.182-.36 5.706-.36 11.292-1.321 16.59-3.508 4.291-1.778 8.703-3.195 13.402-3.628 4.435-.408 8.631.144 12.275 2.907l.144-80.53.024-9.01c-1.51-1.177-3.165-1.946-5.083-2.33"
        />
...

SCSS

$icon-size: 32px;
$icon-color: #999;
$icon-color-highlight: #2980B9;

body {
  background: #fff;
  .icons {
    max-width: 800px;
    margin: auto;
    h2 {
      color: $icon-color-highlight;
      font-family: lato;
      font-weight: 700;
      font-size: 42px;
      margin-bottom: 1em;
    }
    height: 100%;
    text-align: center;
  }
  h5 {
    font-family: lato;
    font-weight: 300;
    color: #999;
  }
  .icon {
    display: block;
    float: left;
    width: 120px;
    text-align: center;
    margin: 2em 0;
    stroke: $icon-color;
    transition: stroke .25s ease, width .5s ease;
    svg {
      height: $icon-size;
      width: $icon-size;
      display: inline-block;
      g {
        fill: $icon-color;
        transition: fill .25s ease;
      }
    }
    &:hover {
      svg g {
        fill: $icon-color-highlight;
      }
    }
  }
  .icon-stroke {
    svg {
      stroke: $icon-color;
      fill: none;
      g {
        fill: none;
      }
    }
    &:hover {
      svg g {
        fill: none;
        stroke: $icon-color-highlight;
      }
    }
  }
}


.input--range {
  width: 100%;
}

JavaScript

$(document).on('input change', '.input--range', function() {
	var size = $(this).val();
  var sizeWrap = 100 + parseInt(size) ;
  $('#slider_value').html( "Icon size " + size + "px" );
  $('.icon').css({"width": sizeWrap + "px"});
  $('.icon svg').css({"width": size + "px", "height": size + "px"});
});