Our Name is Mud - Component Library

Symbols

ui-close
ui-facebook
ui-instagram
ui-logo
ui-twitter
ui-youtube

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%;
  }
}