Asta Valentaite

Symbols

ui-burger
ui-close-lg
ui-close
ui-comment
ui-down
ui-email
ui-facebook
ui-instagram
ui-link
ui-logo-a
ui-logo
ui-message
ui-next
ui-plus
ui-prev
ui-share
ui-tel
ui-twitter

Twig macro

[[ h.symbol('ui-facebook') ]] /* but with braces */

HTML snippet

<i class="icon icon--ui-facebook">
    <svg>
        <use class="no-barba" xlink:href="#ui-facebook"></use>
    </svg>
</i>

Generated SCSS block

.icon {
    position: relative;
    display: block;
    max-width: 100%;

  & > svg {
        position: absolute;
        width: 100%;
        max-width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
  }

  &:after {
    content: "";
    display: block;
    height: 0;
    width: auto;
  }
}

.icon--ui-facebook {
  width: 48px;
  &:after {
    padding-bottom: 100%;
  }
}